How to Make a Background for Tumblr

Save

You can make adjustments to your blog's background in most Tumblr themes using the Theme Options section of the Customize page. The Theme Options section often includes settings to select a background color and upload an image from your computer to use as your theme's background. You can also use the HTML editor to embed a background image into the CSS style section of your theme's code. Altering your theme's code may cause unwanted changes to your blog's appearance, so take care if using this method.

Customize your Background Using Theme Options

  • Log in to Tumblr. Click the "Customize" link located at the top of the right sidebar. This page helps you customize the appearance of your blog.

  • Select a background image. Scroll down the left sidebar, then click the camera icon next to "Background" at the top of the Theme Options section. Select an image from your computer to use as your theme's background, then click "Open." Some themes do not include the option to add a custom background image.

  • Select a background color. Depending on your blog's current theme, you may be able to customize the background color under the Theme Options section. For example, click the circle next to "Background" or click "Background Color" and then select a color.

  • Save your changes. Click the "Save" button at the top of the left sidebar. The button text changes to "Saved."

Add a Background Image to your Theme's Code

  • Open your Tumblr Dashboard and click "Customize" on the sidebar to the right.

  • Click the "Edit HTML" link below your theme's title on the left sidebar. The HTML editor displays all the code for your blog's theme.

  • Locate the end of the document's CSS style section. Press "Ctrl-F" and then enter "<body>" -- without the surrounding quotes. Locate the </style> tag a few lines above the <body> tag. The </style> tag represents the end of the CSS section.

  • Copy and paste the following code directly before the </style> tag you located:

    body { background-image:url('YOUR_IMAGE_URL'); background-repeat:no-repeat; }

  • Edit the background image URL. Replace "YOUR_IMAGE_URL" with the URL of the image located on the Web that you want to use for your background. For example, upload an image to a free image hosting service -- such as Flickr, TinyPic or Image Host -- and then copy the image's URL (links in Resources).

  • Save your changes. Click the "Update Preview" button at the top of the Edit HTML sidebar and then click the "Save" button.

Tips & Warnings

  • Replace "no-repeat" with "repeat" in your background-image CSS code if you want your background to repeat, rather than remaining static.
  • Preview your changes before saving to make sure your theme displays correctly.
  • If you make unwanted changes to your theme, you can restore your old themes using Tumblr's Recover Custom Theme page (link in Resources).

References

  • Photo Credit Digital Vision/Digital Vision/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!