August 11, 2011

Add Background Images

With the Unlimited, Premium, or Business Class plans, the Custom CSS or Advanced Templates advanced design features can be used to add background images to a blog. This can be used to set an image as the background of the entire page or a background to a specific column or other page element.

First, upload the image you would like to use to your Typepad account at Library > File Manager.

We highly recommend uploading any images used in your blog's design to your Typepad account at Library > File Manager. By uploading the images to your Typepad account, you are ensuring the images will display when your site loads. Images which are hosted by an outside site (Flickr, Photobucket, etc.) rely on the third-party site to load. If the third-party site is down, the images on your blog will not display.

Then, you can edit the blog's stylesheet or use the Custom CSS feature to add CSS code similar to this:

This code adds the background image to the full page, behind the content container. In this example, the image is repeated but if you wanted it to repeat only horizontally, you can add "repeat-x" to the code. If you wanted the image to repeat only vertically, you can add "repeat-y" to the code. You can also add "no-repeat" if the image should not be repeated. Here's an example on how this is used:

To have the background image remain static while the blog content scrolls, use fixed top center instead of repeat:

To add a background image to a column, you would add CSS code similar to this:

This code refers to the right hand column in a two-column, right layout. This portion of code can be altered depending on the column you are adding a background image to.

For example, to add a background image to the left column in a two-column right layout, change the "#beta-inner" reference to "#alpha-inner." For a three column layout, change ".layout-two-column-right" reference to ".layout-three-column." The third column in a three column layout is referred to as "#gamma-inner."

These steps could apply to practically anything on your blog. To determine the class of an area you want to add a background image to, try viewing the HTML source code of your blog and look for tags similar to <div class="class-name-here">. You would then add that class and the background image code to your stylesheet or on the Custom CSS page.

You can find more information on background properties here.


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services