How to put a background image in your Tumblr theme
Putting or changing a background image or picture in your Tumblr theme is actually easy. However, the coding and changes to the html Tumblr theme to make it look exactly the way you want can get extremely annoying, depending on the skin you are actually using for your Tumblr layout.
For example, it may not be enough just to insert the url of your image, but you will have to edit, change or delete other background colors that could be covering your image background.
You might also be interesting in adding a scroll to top button tumblr in addition to the background picture. Let’s get started
How to Put a background image in your Tumblr Theme the right way and Size
- First of all, login into your Tumblr account and visit your very own Tumblr site. Once there you will see in the top right corner a button that says Customize, click on it please.
- Now, in this new page, click on Theme on the top navigation bar and then click on Custom HTML at the bottom of the menu that has just dropped down (if you don’t see it you will have to close some bars in your browser theme to give it enough space to see the option Custom HTML.
- Copy the whole code you see here and paste it in a notepad and save it, this will be a lifesaver to go back to where we start in case you don’t remember the steps you’ve done.
- Now this is where it gets fun, we need to alter the inline css to include the image you want as the background of your Tumblr Theme. First of all, find the following code in your theme:
- Now, after that code you should find this code “body {” and inside the body tag there should be the background: line. It is here that we need to insert the url of the image you want to use for the layout.
- For example, in my Tumblr the background line looks something like this:
background: {color:Background} url(‘{image:Background}’) top left fixed repeat;Now replace the {image:Background} with the URL of your image (if you have it in your computer upload it to Tumblr first ), and change the top left fixed repeat for top left fixed no-repeat.
- Click on Update Preview and verify the image is actually showing up as you want, if it does click on the SAVE BUTTON on the top right corner of your screen and that’s it.
- Is that it?, well I don’t really think so, because there are several other variables that could make your image not fit into the background, the image might be too small and then the rest of the background goes black, fixed body width, other background colors that may be hovering over your background, browser size, and image height as well, but these steps are the very first to change the background image in your Tumblr.
<style type=”text/css”> |
Important Note: I believe that the single most important thing to know here is if the body tag has a fixed width or not, if it does, just edit your image to fit that size, if it doesn’t I recommend going for a image width bigger than 1600pixels (it depends on the screen resolution you are using actually) and a height bigger than 700pixels. Beyond this, there are many other ways to make your image blend with your background, specially if it was crafted in an editor, but for photos I guess that the major tip I can give.
Please post your questions here and I’ll help you fully customize the image into your current theme.
Tumblr has a really extensive documentation on how to customize your Tumblr theme html if you want to read it.
18 Responses to "How to put a background image in your Tumblr theme"
Add Comment