Typepad 101: Add a Background Image to your Navigation Bar

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. Topics covered in this series are suitable for bloggers at any skill level. If you're on a plan which doesn't include a necessary feature, you can upgrade your account anytime and put these tricks to use on your blog.

If you want to make a small change to your blog that will have a big impact on your design, consider adding a background image to your Navigation Bar. All you need is an image and a little Custom CSS, and you're in business. Our example design was created using the Theme Builder with a custom banner image and a little extra CSS to make the design a bit more custom, all things you can do yourself pretty easily. Want to see more? You can click the image below and enlarge it for the full impact, or see the design live, here.

This tip uses Custom CSS, which is a feature of our Pro Unlimited account. At the Plus level? Remember, you can upgrade any time!

The first element of our project today is the image that will sit behind the links on your Navigation Bar. You'll need to make sure that the image is wide enough to stretch across the entire container, or you'll want to use one that is seamless, and suitable for tiling.

In the case of our example design, our container width is 1030px, so we want to make the image the same width. This is pretty easy to do using Paint Shop Pro, Photoshop, and some online image editing tools as well.

Here's our ribbon, resized a bit and in a classy dark grey for instructional purposes:

Once you've got your image, you'll want to upload it to your File Manager at Library > File Manager. The image will then appear in a list with the other items in your File Manager. Next, click the image title in the list to view the image in a new browser tab. The URL, or path to your image is in the address bar there - keep that handy, because you'll need it soon.

Now you're ready for the second (and final) step. In another tab, click to Design > Custom CSS, and paste the short snippet of code you see below:

#nav { background: url(http://www.your-url-here.com/images/ribbon.png); padding-top: 0px; padding-bottom: 0px; }

Next, replace the URL in the code with the URL/path for your specific image. Preview the design change to make sure that it looks the way you want it to, and then save your changes, and you're all set! Adding a little extra element that ties in with your design is a great (and easy!) way to make your blog look a bit more custom.

Check out more tips for styling your Navigation Bar with Custom CSS here.