How to Make a Background Behind Text in the Tumblr Navigation Bar

By Charlotte Mission

Tumblr gives you the ability to customize almost every aspect of your blog, including features such as the header and the navigation bar. The commands the site uses to determine your blog’s appearance are only accessible via the page’s HTML code, but you don’t need in-depth technical knowledge to make changes to the navigation bar.

Click the gear-shaped icon at the top of your home page and click on the name of your blog. Select the “Customize Appearance" option and then click "Edit HTML."

Locate the portion of code that reads: #wrapper #sidebar #top { background: #fff}

Delete “#fff” and enter the HTML code of the color you want to use for the navigation bar. You can find list of HTML color codes on sites such as W3 Schools (link in Resources).

Alternatively, if you want to use an image as the background, upload it to a photo-sharing site such as Flickr and copy the url of the image. Type “url” followed by open parenthesis. Paste the URL of the image and close the parenthesis.

Click the "Save" button to enable the change.


The final code should resemble this example which changes the navigation bar background color to blue: #wrapper #sidebar #top { background: #33CCCC}

For an image, this example changes the navigation bar background to an image: #wrapper #sidebar #top { background: #url(}