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

  1. 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.
  2. 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.
  3. 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.
  4. 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:

  5. <style type=”text/css”>
  6. 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.
  7. 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.

  8. 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.
  9. 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.

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.


If you enjoyed customizing your tumblr theme by adding some simple background image, you will also want to add the already popular tumblr energy saving codes, which are basically screen savers for browsers, that help reduce your monitor consumption energy when you leave them turned on.

130 Responses to "How to put a background image in your Tumblr theme"

Add Comment
← Older Comments
  1. marisol

    February 5, 2013 at 1:17 am

    so all that happened was that the background changed to light blue. is there a way to fix that?

    [Reply]

  2. jeannie

    February 6, 2013 at 12:19 am

    hi i need help in putting a picture in my background, can u help me?

    [Reply]

  3. Courtney

    February 11, 2013 at 7:55 pm

    I have tried over and over and over again and it just won’t work! I am ripping out my hair but my theme’s background just stays the same blue color an i want it to look like an image i have the URL for but your tips won’t help me. please help me i have absolutely no clue what to do. I am just amazingly terrible at html editing!

    [Reply]

  4. Sashabella

    February 16, 2013 at 10:46 pm

    Mine says background::FFFFF or something like that do i just post it after that or what?

    [Reply]

  5. stoney

    February 25, 2013 at 8:42 pm

    I used your tips. But it just says “Updating Preview…” and wont stop. ANd my blog has gone completely white!

    [Reply]

  6. Alejandra

    February 27, 2013 at 1:57 am

    Hey, is there a way that i can make 2 different pictures my background on tumblr? one on the left, the other on the right ?

    -Thanks

    [Reply]

  7. Nathan

    February 28, 2013 at 1:18 am

    Everyone, you realize that it can take up to 5-10 minutes for changes to actually apply to your tumblr. Make a change, hit save, then WAIT before giving up. Also, try previewing in another browser, not logged in. If you’re editing in Firefox, open up your tumblr in Chrome so it doesn’t see you logged in.

    [Reply]

  8. Marshall

    March 14, 2013 at 1:36 am

    It doesn’t seem to be working for me. It just stays white! I am using the minimalist theme.

    [Reply]

  9. Alexis

    March 17, 2013 at 6:22 pm

    Hello!,
    So I followed the steps exactly, but I can’t figure out how to make my picture fit my whole page. It’s just on the top of the page, not the whole thing, like you said, the rest of my background is black. But I can’t find the width and height. I found them, but when I change it, they don’t change a single thing. HELP??

    [Reply]

  10. Sofia

    March 21, 2013 at 11:05 pm

    Hii, How do I upload a photo from my computer for the background??

    [Reply]

  11. Tobias Jørgensen

    April 17, 2013 at 8:59 pm

    My background image is different from chrome to internet explorer. What am I doing wrong?

    [Reply]

  12. Zal

    April 23, 2013 at 2:47 am

    This works fine for me on my background, but i’m wondering if there’s a way to do this on my sidebar? I’m using redux by jacob.

    [Reply]

  13. Sian

    April 23, 2013 at 8:34 am

    hi, i tried using your way and followed every step, but for some reason, when i do update preview, it shows my background is blank?? O.o
    what do i do?

    [Reply]

  14. gabrielle

    April 26, 2013 at 3:38 am

    how do i do step 4 how do i find that code in my theme????? stuck >:(

    [Reply]

  15. Melissa Tarr

    April 28, 2013 at 2:43 pm

    I couldn’t manage to do it and I have no idea what I’m doing wrong… :(

    [Reply]

  16. Muffinz

    April 28, 2013 at 7:38 pm

    Right… I couldn’t even find the very beginning code needed to start this whole thing. I’m completely lost in all the HTML coding.

    [Reply]

  17. Courtney

    April 28, 2013 at 7:52 pm

    I got all the way through it, until the end part where I updated my preview. It showed up for a split second, and then vanished and said, “invalid html”. .__.

    [Reply]

  18. Tonilyn

    May 4, 2013 at 9:02 am

    there’s no
    background: {color:Background} url(‘{image:Background}

    [Reply]

  19. Jake

    May 20, 2013 at 2:27 pm

    really good instructions thank you but i got to the part where i have the background in the preview but its surrounded by black, i just want to set the background to cover the whole of my tumblr page
    thank you :D

    [Reply]

  20. Holly Harborow

    May 22, 2013 at 11:36 pm

    i want to try to make a gif “file:///Users/Holly/Desktop/tumblr_met75sHLKK1qgcra2o1_500.gif” my background, but i don’t understand how!

    [Reply]

    Grace Reply:

    You will need to upload the file first like to tumblr. Just post it, then find the url of the image

    [Reply]

  21. Paul Kaos

    May 25, 2013 at 2:46 am

    oh, also, my images are hosted remotely, would that cause issues with tumblr? like do I HAVE to host them on tumblr, or is this irrelevant as I’ve taken it to be?

    [Reply]

  22. youcancallmeallison.tumblr.com

    June 1, 2013 at 7:01 pm

    I don’t get anything of this. Can someone please tell me step by step and more pecisly how to do this? : <

    [Reply]

  23. emma

    June 4, 2013 at 1:32 am

    i cant find where to go. it isn’t showing

    [Reply]

  24. Emilia

    June 4, 2013 at 7:57 pm

    I have no idea what I’m doing with the html, so I would be very thanful if I simply sent you my whole html and the url of the picture and you would set my backround, cause I don’t even know what other qeustion I’d be able to ask, so please write back and give me an answer

    [Reply]

  25. Yamina

    June 4, 2013 at 8:36 pm

    THANKYOU THANKYOU THANKYOU! it actually worked for the first time!!! but i had this ((((( background: {color:Background} url(“{image:Background}”) repeat; ))))) it did not have a thing like top left etc , I changed it to (((( background: {color:Background} url(“{image:Background}”) fixed repeat; ))) AND IT HELPED THANKS!!!

    [Reply]

  26. Autumn Johnson

    June 7, 2013 at 6:15 pm

    I don’t understand step 2. I mean I clicked on the themes button, but I can’t find the Custom HTLM. I don’t really understand the “close some bars in your browser theme” part. Please help me!

    [Reply]

  27. Cheri

    June 14, 2013 at 7:35 pm

    I tired to edit my background and MY ENTIRE BLOG WHEN WHITE> there is no customize button or anything, it’s stuck! how do I a) restart this or b) fix it??

    [Reply]

  28. Emily

    June 30, 2013 at 11:30 pm

    S.O.S! Well “save my blog” but I dont think starting a comment with “S.O.B” would be good… but anyways I tried your tips and I’m still having trouble getting the background image uploaded. Am i putting the code in incorrectly?

    body {color:Background} url(‘{http://www.zingerbug.com/Backgrounds/background_images/light_pink_and_blue_gradient.jpg}’) top left fixed no-repeat;

    I just copied and pasted the code as it currently is. I also tried keeping the “image:” before the url but that didn’t work. The image just isnt showing up at all. I don’t know what to do… Help?

    [Reply]

← Older Comments

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>