How to Position a Tumblr Banner

By Alan Sembera

i Mario Tama/Getty Images News/Getty Images

Many Tumblr themes allow you to display a banner image at the top of your blog in place of your blog title. If, however, the banner does not line up to your liking, you can change its alignment by editing your theme's HTML code. If your theme doesn't support banner images, or you want to add a banner above the title, you can edit the HTML code to add and position a banner manually.

Themes With Header Images

Click the "Customization" tab on your Tumblr dashboard to access your theme settings.

Scroll down to the Appearance section in the left pane, and then click the "Upload" button next to "Header" to upload your banner image.

Scroll back to the top of the pane, and then click "Edit HTML" to access your theme's HTML code.

Press "Ctrl-F" on the keyboard to bring up the search tool, and then search for "{Title}" (without the quotes) until you find the first occurrence of the term in the body section, soon after the "<body>" tag. In many cases, it will be within a block that begins with "<div id="title">" or "<div id="header">".

Enclose "{Title}" with the "<center>" and "</center>" tags, so that the code looks like this:

<center>{Title}</center>

Click "Update Preview" to see if your changes worked. If the banner doesn't center on the page, you may have modified the wrong section of code, in which case undo your changes and try again.

Click "Save," and then select "Exit" after you successfully change the banner. To discard your changes for any reason or to start over, click the back arrow without saving, and then click "Exit."

Add and Position Banner Manually

Upload your banner image using Tumblr's upload page (link in Resources), and then copy the URL displayed on the page. Alternatively, upload the image file to another website, such as PhotoBucket or TinyPic.

Click the "Customization" tab on your Tumblr dashboard to access your theme settings.

Click "Edit HTML" to access your theme's HTML code.

Press "Ctrl-F" on the keyboard to bring up the search tool, and then search for "<head>" (without the quotes).

Insert a new line just below the "<head>" tag, and then add the following line of code:

Replace "BannerImageURL" with the URL for your banner's image file.

Click "Update Preview" to make sure the banner displays properly. Make any changes as needed, and then click "Save" and "Exit."

Tips

To align the banner to the left or right instead of in the center, use the "<left>" or "<right>" tags instead of the "<center>" tag, and also change the "</center>" tag to "</left>" or "</right>".

Warnings

These steps should work on most standard Tumblr themes, but they won't work as intended every time due to differences in theme design. Some themes may require that you declare the image and then assign it a style in the theme's style sheet; however, this method requires a basic understanding of how CSS works, and the specific steps will vary among theme designs.

References

Writer Bio