How to Make a Background for Tumblr

Written by anthony bonesarelli
  • Share
  • Tweet
  • Share
  • Email

Your Tumblr background is an image that is positioned beneath the main layout of your page, so that users continue to see the image as they scroll through your list of posts. Although some Tumblr themes simply use a solid colour for the background, many other themes utilise a default background image. Even if you are using an existing Tumblr theme template, you can create your own Tumblr background to create a fresh look behind an already streamlined layout.

Skill level:

Things you need

  • Photoshop, GIMP or other image-editing software

Show MoreHide


  1. 1

    Examine your Tumblr's current background and the accompanying colour scheme of the layout. You will want your background to complement the colour and arrangement of the existing layout, unless you are planning to rearrange the entire layout based on your new background. Red text, for example, will appear very harsh against a blue background. A primarily dark background will require bright text. Keep such factors in mind to avoid wasting your time on a background that makes your text illegible.

  2. 2

    Open your image-editing software (Photoshop, GIMP, Paint, etc.) and create a unique background for your Tumblr. You can design a completely original image, or you can edit an existing photo or other image to fit the size of your background. Although the ideal size of the image depends on your theme's particular specifications, most browsers will comfortably accommodate backgrounds with a width between 1400 and 1600 pixels. To fill the background, your image should have a height of at least 700 pixels.

  3. 3

    Save your new background as a PNG (Portable Network Graphic) image. The PNG file type can generally preserve a higher-quality resolution with a smaller file size than other common image file formats. Your Tumblr visitors will not want to wait a long time for the background of your page to load, so keep the file size as small as possible without distorting or pixelating the image.

  4. 4

    Visit a free image-hosting website, such as Photobucket or Imgur. Select "Upload" and browse your computer for your new background. Upload the image and keep this window open to retrieve the image URL for a later step.

  5. 5

    Log in to your Tumblr account in a new browser tab or window. Visit your site and click the "Customize" button. Click the "Theme" menu and select "Custom HTML" to display the code for your blog's layout.

  6. 6

    Press "Ctrl" + "A" to select the entire code. Right-click and select "Copy." Open a blank Notepad document and paste the entire code. This will preserve your Tumblr's current layout, in case you encounter any problems while editing the code.

  7. 7

    Return to the "Custom HTML" menu on your Tumblr and press "Ctrl" + "F." Enter "<style type="text/css">" (without the outside quotes) to locate that particular string of code. Beneath that line, locate the "background" tag inside the "body" code.

  8. 8

    Replace the existing background image URL, written in the "{image:}" brackets, with the URL of your background from Step 4. If the code reads "top left fixed repeat," change that phrase to "top left fixed no repeat." This will lock your image into a steady position on the page.

  9. 9

    Click "Update Preview" to view your Tumblr layout with the newly installed background. Click "Save" to finish updating your Tumblr page.

Tips and warnings

  • Use Photoshop's "Save for Web" function to compare the various file types and resolutions available in Step 3. By slightly muting the colours or filtering the sharpness of the image, you can greatly reduce the image's file size without significantly affecting the image's appearance.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.