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 {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:
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;
}
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)
My name is Amanda Fazani and I write Blogger Buster to help other Blogger users make the most of their Blogger blogs.
Post a Comment 14 Comments:
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.
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.
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
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.
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.
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
Once again... Thank you, thank you, thank you!! I'm so happy I stumbled onto these tutorials!
Thank you!
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 :)
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?
Again I am just so very thankful and excited!
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
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
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
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/