x

How to Put a Picture Behind Post Headers on Tumblr

by Aaron Parson

By default, your Tumblr blog shows a text header with your blog title above your posts. To spruce up your page's appearance, you can add a custom picture to the header, while leaving the existing text displayed atop the image. On the default Tumblr theme, this requires modifying the theme's HTML, but adding an image only takes a single extra line of code.

Log in to your Tumblr account and open the "Upload a Static File" page (link in Resources). Tumblr provides this upload space exclusively for theme files, so don't use it to upload images to post on your blog.

Select the image you want to use in your header and click "Upload File." Images must be under 5MB in size, and you can only upload a maximum of 15MB per day.

Copy the address that Tumblr displays for your uploaded image.

Open the Tumblr Settings page, select the blog you want to edit and click "Edit Theme." Click "Edit HTML" under the name of your theme.

Scroll down in the code to your current header. To help find the correct line, press "Control-F" and search for "IfShowBlogTitle" (without quotes).

Type the code "<div style="background: url();">" (without external quotes) immediately before "{Title}" on the "IfShowBlogTitle" line. Paste the image address you copied earlier inside the parentheses.

Click "Update Preview" to see your blog's new appearance. If it looks correct, click "Save."

Tips

If the overlay text takes up more space than your image, the image will repeat to fill the necessary space. If you'd rather have the image only appear once regardless, add "background-repeat: no-repeat;" (without quotes) immediately before the final quote mark in the code you added.

Warnings

Information in this article applies to the default Tumblr theme. Other themes may work differently or include a way to modify your header without editing the code manually.

Video of the Day

Brought to you by Techwalla
Brought to you by Techwalla

More Articles