49 Background Styles for the Minima Blogger Template (Readers Questions) April 07, 2008 /

The Minima template features only one definition for the background property, so if you change the color (or add a background image) this will affect the whole of the template, including the posts area and sidebars.

Over the past few weeks, many people have emailed or commented who would like to know how to add a background image/change the main background color in Blogger's Minima template, while retaining a flat color for the posts and sidebar areas. So in this post, I'll explain how to achieve this.

How backgrounds work in the default Minima template

The only style for a background property in the default (uncustomized) Minima template is for the main body section:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

None of the other areas in the template have any background properties defined, so if you change the background color (or add an image to the background), all areas of the template will change too.

This can be especially problematic if you try to use a background image, as the text may be very difficult to read against a patterned background!

How to add a different background to the main content area (posts and sidebar)

The main posts section and sidebars in the Minima template are contained in a section called #outer-wrapper. This section is styled in the <b:skin> section (the style area) of your template, like this:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

If you would like this entitr section to have a different background to the sides of your blog (the main body background, you can change this by adding one simple line of code:

#outer-wrapper {
background: #ffffcc;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Here the hex value of #ffffcc will make the main sections of your blog have a cream colored background, like this:

You can of course use any background color you like (check out the web color calculator of you need to find the hex value for your preferred color choice).

Once you have saved your template with the outer-wrapper background in place, you can then change the main background color of your blog in the Fonts and Colors section to any other color you prefer, and this change will not affect the main content of your blog.

Adding a background image to the sides of your blog

If you would prefer to use a patterned background (or background image) for the sides of your Minima template, you can easily do this by adding the URL of your image to the body section, like this:

body {
background:$bgcolor url(http://imagehost.com/your-image-url.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

This example would add a background image which is repeated across the whole template. It is best used for tiled background patterns, which would then appear like this in your template:

Further resources

I hope this post has explained how to use different background styles in the Minima template. Here are some other articles you may be interested to read too:

• How to use a background image for your blog
• Styling sections of your blog with borders and backgrounds
• Web Color Calculator (to find the perfect color for your backgrounds)