52 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:

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

52 comments:

  1. Thanks Amanda!

    Don't know what the problem was before but it seems to have resolved it's self. One little thing out of place can sure screw up the works. If I had to guess I think I didn't change the outer wrapper color first. I can now play around with textures and colors to suit.

    If you worked on this post specifically for me a big hug and thank you.

    ReplyDelete
  2. You can add some CSS and make the background stay on the left or right, top or bottom as well. I've been doing that as well.

    ReplyDelete
  3. Hello Amanda,
    I'm from Indonesia and use one of your free template. Check it out. Your tutorial was helpful and I usually look for this blog for references.
    Amanda, would you help me? It seems in the bottom of my sidebar's blog is not patch on my footer. How to tweak this?

    Regard from Indonesia

    ReplyDelete
  4. Hi Amanda,

    I am actually making another template for my blog and I've been following your tips, lessons and tricks. I really thank you for that.

    Anyway, how do you add another column to the right of your main column, on top of the 2 sidebar columns as you did on your site? (Where you put your Sponsors and Ads)

    Thank you.

    ReplyDelete
  5. For Janeywan,

    I'm glad this was useful for you :)
    Strangely enough, I've had four different people email about this problem in the past week, so I thought it was about time I wrote a post explaining how to achieve this.

    Do let me know if there's anything else you'd like me to post about here as I always enjoy helping readers with their templates.

    For Laura:

    Thanks for the tip! I'll be sure to include this information the next time I write about background images so others can benefit from this too :)

    For Dyden Rinda:

    I've just had a peek of your blog and cannot tell what you mean by the problems in your footer. Could you be more specific about this and I'll try to help.

    For Aldrin: If both of your sidebars are contained within a DIV section, you can simply add another DIV above them which would house your ads or other content.

    I may post an article about this soon though in the Blogger Template Design series. Thanks for pointing this out; I hadn't considered others may want to know about this technique until you mentioned it.

    ReplyDelete
  6. Hi Amanda
    will it work on Mimima 3 column template ?
    I also wonder if you know how I can change the colour of my side bars.

    I am in awe of your blogger tips
    My Little Drummer boys

    ReplyDelete
  7. Once again... Thank you, thank you, thank you!! I'm so happy I stumbled onto these tutorials!

    Thank you!

    ReplyDelete
  8. Amanda your work is wonderful!!

    I am just new to editing CSS and I am having an issue finding #outer. I am using an un-edited minima. Can you tell me what section it may be in? I would assume posts.

    Any input would be great :)

    ReplyDelete
  9. You have been the help I have been looking for! I am so thankful! I do want to add a photo pattern to the sides of my blog can you tell me where to host an image?

    ReplyDelete
  10. Again I am just so very thankful and excited!

    ReplyDelete
  11. I got it...the image hosting that is. I LOVE my blog now. It is what I have invisioned for months now but have had no idea on how to do any of it. Thank you so very very much!

    Bless you!
    stop by and visit me sometime!
    www.journeytomercy.blogspot.com

    ReplyDelete
  12. There are a lot of sites out there showing book video. BookVideoTV, BookTelevision and of course CSPAN, but I like how BN.com and Reader's Entertainment TV have specific genre channels and original shows. There's just more to see and I can be specific in what genre I'm interested in. Anyone else watch online tv?

    http://www.readersentertainment.tv

    ReplyDelete
  13. Your site is WONDERFUL and so helpful! I have followed your instructions over and over again and my blog background is still white. Here is the html that I have changed. If you could look at it and tell me if you can see what I am doing wrong I would really appreciate it. TIA.

    Jamie

    body {
    background:$bgcolor;
    background-repeat: repeat;
    background-image: url(http://i11.photobucket.com/albums/a193/jamiebree3/pattern_102-1.gif);
    background-attachment:fixed;
    border:#ff0000 15px solid;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }
    a:link {
    color:$linkcolor;
    text-decoration:none;
    }


    my blog address is: jamiebree.blogspot.com

    ReplyDelete
  14. First of all I like to thank you for sharing your knowledge.

    Could you please tell me how I can lower my sidebars. I mean that I like to start them a little lower than the header. I know it has something to do with the padding, but.....:-)

    Oh, it is about my new blog http://fryskesblogdesign.blogspot.com/

    ReplyDelete
  15. A coworker recently asked me to spruce up her department's blog, which is hosted on blogger. I had flashbacks to the days when I hosted my personal page on blogger and always struggled with the code and interface. The updates Blogger has made since I switched to Wordpress combined with your tips made it easy to do—and she is so impressed! Will you forgive me if I keep you a secret and let her think that I'm brilliant?

    ReplyDelete
  16. I will read more on this. I also want to tweak my blog to add background pictures etc.
    Are there any rock-reliable image hosting solutions that will not slow down page-loading?
    Can you upload an image big enough that it won't be tiled?

    ReplyDelete
  17. I have been trying to add a pattern image to the background in the minima 3 column, and I keep getting a "More than one widget was found with id: Text1. Widget IDs should be unique" Error message. Here is what I have....

    body {
    background:$bgcolor url(http://i28.photobucket.com/albums/c214/mayjoy/smallgumdropbackground.jpg);
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    Help!

    ReplyDelete
  18. You are awesome! I just left a comment earlier adn now found this post. Is there a way to make each column have their own background color with the main background in between? Do you know what I mean?
    Thank you again so much!

    ReplyDelete
  19. Hi Amanda!

    Just wanted to say a BIG thank you for your information on this - it worked perfectly!

    I've been wanting to customize my blog this way and had no idea how to do it.

    Your blog was the first link I clicked on when I googled and I'm SO glad I did!

    Thanks again for your help!

    Happy New Year!

    ReplyDelete
  20. Thank you, Amanda! You helped me do exactly what I wanted to do for my design blog! Continued success!

    ReplyDelete
  21. Thanks for putting this up I was having trouble and realized after reading your post that I some how lost the ";" at the end of the line.

    Who would have thought that one character would throw everything off.

    ReplyDelete
  22. Thank you so much for this, I've been searching for close to 2 hours to find how to do this

    ReplyDelete
  23. Amanda Fazani i am a big fan of you i was wondering if you can give me the template that you are using on this site thanks a lot.
    email me at smitkumarpatel@gmail.com

    ReplyDelete
  24. Hello, do you know how I can make all comments show on the main page of the Minima template and not just on the post page?

    ReplyDelete
  25. OMG! Thanks a bunch. I have been playing around with my template for MONTHS trying to figure this out. Now that I know how to do it, I can't stop fiddling around with it. The only problem I am having now is trying to decide which background I want to go with!

    ReplyDelete
  26. hiiiiiiiiiii dude good information it worked on my blog

    www.mobmani.blogspot.com

    make money

    ReplyDelete
  27. thanks for all these instructions. im working on my new blog now, and this has been so useful
    thanks again
    xx

    ReplyDelete
  28. I just can not get this to work, I don't know what i'm doing wrong - very frustrating.

    ReplyDelete
  29. hi,.. Thank you for the tutorial,.. Thank you so much,..^^,

    ReplyDelete
  30. Thank you so much- I was really hating blogger and thought I was going to need one of those cutesy background template makers- you have saved my sanity!

    ReplyDelete
  31. Thank you so much for this. I wish I would have found this sooner. It took me 30 seconds to fix my background issue once I found this.

    Thanks again!!

    ReplyDelete
  32. Happy new year.2010
    this is outstanding posting for comment,
    thank you.

    Webroyalty

    ReplyDelete
  33. This didn't work for me either :(

    I tried to add a pattern on the sides using photobucket, But they are still white.

    This is my code:

    body {
    background:$bgcolor url(http://s708.photobucket.com/albums/ww81/photosbyelsie_photos/Personal/?action=view&current=repeatxy_5194891-url.jpg);
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }
    a:link {
    color:$linkcolor;
    text-decoration:none;
    }
    a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }
    a:hover {
    color:$titlecolor;
    text-decoration:underline;
    }
    a img {
    border-width:0;
    }

    ReplyDelete
  34. Thanks so much! Worked perfectly!

    ReplyDelete
  35. Hello Sir I Want To Ask? How I Can Download this template,I Want It In Black Colour,How I Can Manage All This?

    ReplyDelete
  36. Thank you, this worked pefectly. Do you know how I can make the main section, That creamed colored part, a little wider? I always use a 3 column background or a wider two column just because I like the look. It doesn't look so crowded.
    Sharon

    ReplyDelete
  37. I need to change my outer-wrapper image, I've tried some but it doesn't work yet. Anyone can help me?

    ReplyDelete
  38. does anybody know where to get minima blogger template for wordpress..tqvm in advance =D

    ReplyDelete
  39. I would like to also have a plain section for my posts and such with a different, custom background image for the "content- wrapper" of my blog and need some help with the code for that.

    ReplyDelete
  40. A quality set of two pearl or perhaps diamond stud pandora earrings is mostly a classic and also romantic reward. A very simple pendant on the chain is actually surely a vital as is often a quality wristwatch. Then again, no lovely women requirements not pandora uk one but two of any kind of basic item; just being aware of what she needs pandora charms is definitely what makes the treasure especially innovative and emotional. Examine the woman's personal design. pandora necklace If the girl wears bohemian shirts with worn-in denims, pandora jewellery consider some, funky beaded necklace around your neck or a new color bracelet.

    ReplyDelete
  41. This is pretty straight-forward. Thanks for sharing this. Nice-looking background this is.

    ReplyDelete
  42. canada goose jackets Sure enough canada goose down jacket Chen Jiachuan open secret chat window canada goose down coats People in this life canada goose parkas White Horse Master: Yeah Yeah Yeah ~! ~ Really can not offend women canada goose vest But she can not say these words the other side of this shore canada goose hat She tried biting his lip. Computer screen may be too harsh

    ReplyDelete
  43. Worked like a charm but now at the very bottom where my sitemeter is and at the top where the toolbar? it is still the polka dot background and not the white? What do I do to make this white also?
    http://keepingmycents.blogspot.com/

    ReplyDelete
  44. Thanks Amanda for your HTML info for my Minima template. I am tired of the white background and you showed me how to add color. The site looks much better. My next task is to see if I can put a very light shade of gray on the side bar.

    ReplyDelete
  45. Your Post is very nice,
    So i want to share it to my friend in the social network,
    i say thank you for it,
    you can join to my blog or just blog walking and comment to :
    Kolam Air Panas Banjar Bali
    Thank you for your attention

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy