How to Change the Background on Tumblr - dummies

How to Change the Background on Tumblr

By Janine Warner, David LaFontaine

One of the quickest ways to improve your Tumblr blog from the often–generic-looking start themes is to upload your own background image and use it to give individuality and character to your site.

Most modern computers have displays at least 1000 pixels (px) wide, if not wider. If you have a blog about photography or graphic design, you can probably assume that most of your audience will have big computer monitors that can display a background image in full HD resolution: that is, 1920 x 1080 px.

However, to reach the widest possible audience, experiment with your background images to make sure that you aren’t overwhelming the capabilities of your users’ computers.

Before you begin, do these two small things:

  • Open a text editor.

  • Have your replacement image of appropriate height and width already uploaded to your Tumblr blog or somewhere online.

    Your image should have a height of at least 700 pixels and a width between 1400 and 1600 pixels. Your image should be a PNG file.

  1. Log in to your Tumblr site.

  2. Click the Customize link in the upper-right corner.

    The Customization panel opens, and most of the page is taken over by a live preview of the changes you’re making to your Tumblr blog.

    You can also change the title and description of this blog from this panel.


  3. Click the Edit HTML button in the left column.

    A code window appears.

  4. Click anywhere in the left sidebar, in the HTML and CSS code.

  5. Copy the HTML code.

    Yes, the sheer amount of code that appears here is a little intimidating, but you’re changing only a very small part of it.

    Select all the code (Ctrl+A/Windows or cmd+A/Mac) and then copy the code (Ctrl+C/cmd+C).

  6. Paste the code into a text editor (Ctrl+V/cmd+V) so that you can safely edit the code outside the HTML page.

    Consider using a simple text editor, such as WordPad for a Windows PC or TextWrangler on a Mac. You can use a word-processing program like Word or Pages, but you may get unwanted formatting codes mixed in with your HTML unless you’re very careful.

  7. Search the code (Ctrl+F/cmd+F) for the background : line.

    You can also scroll through the code, looking for the section that starts with the body { tag. In our example, that looks like this:

    html, body {background: {color:Background}; height: 100%; color: rgb(82,82,82); font-family: Helvetica, Arial, Sans-Serif;}
  8. Change the HTML code after body to insert your new image.

    Insert the URL link to the image in brackets after the {color:Background} tag so that it reads something like this:

    html, body {background: {color:Background} url('{ Background}'); height: 100%; color: rgb(82,82,82); font-family: Helvetica, Arial, Sans-Serif;}
  9. Click the Update Preview button to check whether the image is showing on your Tumblr blog the way you want.


    If you make an error that really messes up how your Tumblr blog looks, just cut and paste the original code that you saved into your text editor window back into the Customization panel and start all over again.

For more in-depth instructions on how to custom-code your own Tumblr theme, check out the tutorials.