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.
With themes created using the Design Lab, a background image can be added at Design > Style without the need to use CSS. Learn more.
Upload Images
First, upload the background image(s) to Typepad at Library > File Manager. After uploading the image, copy the image URL which will be similar to:http://example.typepad.com/background.jpg
It is highly recommended to upload any images used in the blog's design to the File Manager. By uploading the images to your Typepad account, it ensurs the images will display when the blog 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.
Using CSS to Add Background Image to Design
Then, 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, add "repeat-x" to the code. If you wanted the image to repeat only vertically, add "repeat-y" to the code. If the image should not be repeated,add "no-repeat". 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:
Note: The below tip for adding a background image to a column applies to older themes which are not responsive. This tip also does not work with mixed media layouts - Artistic, Calendar, Timeline.
To add a background image to a column, 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 which column the background image is to be added.
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 can apply to practically any design element of a blog. To determine the class of an element, 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 the stylesheet or at Design > Custom CSS.
For more information on background properties, review this article.
Updated 14 December 2020