How to Make the Background Fit to the Site on Tumblr

By Naomi Bolton

While a Tumblr theme that supports the use of background images can make your blog look more interesting, you don't have any control over the screen resolution your visitors use when viewing your blog. To ensure that the image you are using as your Tumblr blog background always stretches to fit the site regardless of the resolution or Web browser your visitors use, you need to edit your theme's code.

Sign in to your Tumblr account, and then access the "Settings" page from the dashboard.

Select the blog that you want to edit if you have multiple Tumblr blogs, and then click "Customize."

Click "Edit HTML" to access your theme source code, and then press "Ctrl-F" to open the Search window.

Type "body {" (omit the quotation marks here and throughout), and then press "Enter" to locate the body section of the code.

Add a new line anywhere between the opening and closing brackets of the body section, and then type "Background-Size:".

Type "Cover;" to specify that the background image must fit the dimensions of the site and cover the entire background of the page. The full line of code should look like this:

Background-Size: Cover;

Add a new line and type "-webkit-background-size: cover;" to ensure compatibility with the Safari and Chrome browsers.

Add a new line and type "-moz-background-size: cover;" to ensure compatibility with the Mozilla Firefox browser.

Add a new line and type "-o background-size: cover;" to ensure compatibility with the Opera browser.

Click "Update Preview," check that the background looks correct, and then click "Save."

×