Typepad 101: Change the Background of your Blog

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 at a plan which doesn't include a necessary feature, you can upgrade to put these tricks to use on your blog.

The content outside of sidebars and posts/pages column (aka blog container) is the background for your blog. The blog backgrand has also been called the outside margins, sides, or simply, the empty space to the left and right. You can customize the background by changing the color or adding a background image. You can also reduce the visible background by expanding the column widths.

It's actually pretty easy to change the color of your blog's background using the Theme Builder or Custom CSS.

First, you'll want to check out all the colors you can use for your background color. There are tons of websites which list the hex codes for colors. You may want to start by checking the w3schools.com HTML Color Names chart, and you can do a search for other color code sites. Once you determine the color, grab the 6 digit hex color code.

Now, you can add apply the color code to the background of your blog.

If you are using the Theme Builder for your blog's design, go to Design > Theme Builder > General Settings, enter the color code in the Background Settings field, and click Save Changes. The Theme Builder is available with the Plus and higher plans.

With the Custom CSS feature, you can change the background color of any theme. Custom CSS is available with the Unlimited and higher plans. At Design > Custom CSS, enter the below code in the text field:

body { background: #8A2BE2 !important; }

Replace 8A2BE2 with the color code you wish to use and click Save Changes to update your blog. Similar CSS can be added to the Stylesheet Template for your blog if you are using an Advanced Template Set.

Instead of changing the background color, you can add a background image using Custom CSS. There are several variations of how to place the background image on your blog. The basic CSS is:

body { background: transparent url(http://example.typepad.com/background.jpg); }

Where you'll replace http://example.typepad.com/background.jpg with the URL for the image uploaded to your Typepad account at Library > File Manager. You can also replace transparent with a hex color code, like #FFFFF, if want to set the background color when the background image ends. Setting a color code with the background image is ideal if you have an image which fades to a solid color.

If you want the background image to repeat, add repeat-x to repeat horizontally or repeat-y to repeat vertically. For example:

body { background: url(http://example.typepad.com/background.jpg) repeat-y; }

The CSS can be added at Design > Custom CSS to update your blog. You can find more options for adding a background image in the Knowledge Base.

Depending on your preferences, you may want to simply reduce the amount of empty space to the left and right of your blog's content. You can do this by increasing the column widths with Custom CSS, and we have specific information in the article on changing the column widths.

If you want to remove the background entirely, there is the option to select a Fluid width when using the Theme Builder for your blog's design. A Fluid width for the main content column will expand and contract depending on the size of the visitor's browser window filling the entire window, and the background will not display at all. At Design > Theme Builder > Main Content Column, select Fluid for the width and click Save Changes to update your blog.