How to Change the Height, Width and Size of a Background Image on Tumblr

By Mircea Gabriel Suciu

Use CSS3 to customize the appearance and behavior of your Tumblr page.
i Andrew Burton/Getty Images News/Getty Images

If the image you want to display in the background of your Tumblr page does not fit in the space allocated to it, you can resize it using the Edit HTML tool provided by the service. After you locate the background image in the source code for your current theme, you can add CSS3 properties to adjust the picture's height and width. CSS also allows you to specify whether you want the background to repeat.

Click on the name of your blog in the Tumblr dashboard and select "Customize Appearance." Choose "Edit HTML" to open the source code for your current Tumblr theme.

Press "Ctrl-F" to open the search feature of your Internet browser and type "background:" (without quotes) in the search box. Press "Enter" to locate the code that adds the background image to your Tumblr page.

Add the "background-size" CSS3 property to the code, after the line that specifies the location of the background image. You can use the property to specify the width and height of the picture. For example, if you want the width of your background image to be 500 pixels and its height to be 800 pixels, you would add the following line:

background-size:500px 800px;

Click "Save" to save your preferences and resize your Tumblr background.


You can also use CSS3 to specify whether you want your background image to repeat. The property you need to use for this scenario is "background-repeat." If you want to experiment with these properties, visit the Tryit Editor provided by (link in Resources).