How to Center a Background on Tumblr

By Randall Blackburn

Center your Tumblr blog's background image by editing one line of code in the theme.
i Siri Stafford/Digital Vision/Getty Images

To center a background image in your Tumblr blog theme, edit one simple line of CSS code in the blog theme’s HTML code page. Consider using a background image that fills the background space without repeating, or “tiling.” The background image feature in the default Tumblr Redux theme tiles background images by default. You can disable tiling and center the background image by editing the same CSS statement. Note that you can center the image both vertically and horizontally.

Open Tumblr, then click the arrow next to your blog name to view a list of all of your blogs. Click the blog to edit in the pop-up dialog box. To edit your primary blog theme, skip to the next step.

Click the “Customize” tab to open the selected theme in Edit mode.

Click the “Upload” icon in the Background Image section of the Customize panel, then browse to and click on the background image. Click “Open” to upload the image.

Click the “Edit HTML” link to open the theme editor.

Press “Ctrl-F” to open the Find and Replace tool. Type “background,” without quotes, in the input box. Click the down arrow to find the following lines of code:

body { background: {color:Background} url('{image:Background}') top left fixed repeat;

Change the Background property values of “top left fixed repeat” to “no-repeat center center.” The first instance of “center” vertically centers the image. The second instance horizontally centers the image. Don’t forget the semicolon at the end of the statement.

Click the “Update Preview” button to view the background image in the Preview window.

Click “Save” to save the code edits, then click the Exit icon to close the editor and return to the main page of your blog.


You can use a code shorthand for the “no-repeat center center” line if you intend to center your background image both horizontally and vertically. If one “center" value is omitted, a value of “center" is implied. You can simply use “no-repeat center" to center the image both vertically and horizontally.

The line "no-repeat top center" horizontally centers the image and aligns the image with the top of the page.