Using image as background

Using image as a background can be implemented easily using CSS (Cascading Style Sheet). In Blogger CSS can be accessed by going to Dashboard > Design > Edit HTML tab. CSS is the area between <b:skin><![CDATA[ and ]]></b:skin> in the template code.

(Update: If you are applying the background to a template made by Blogger Template Designer, use this method instead: How to use your own background image in Template Designer).

The image can be of jpg, gif or png formats. You may want to choose an image which tiles seamlessly (but then, it’s up to you).

There are many websites providing free background images and textures. A website, GRSites.com shows you a live preview, so you would be able to see the image in action even before downloading it.

Note: Examples below use body element as the selector. You can replace it with any HTML id, class or tag you want e.g. #content-wrapper, .comment-block, .sidebar, p etc.

Now let’s go into the details:

 

Setting the background color

When specifying a background image it is a good idea also to specify a background color. The color you select should be similar to the prevailing color of the image. This will ensure the page will still look close to the way you intended even if the image fails to load or the user purposely has image turned off.

body { background-color: #aa3333; }

 

How to set an image as the background

body { background-image: url(YourImageUrl);}

Replace YourImageUrl with the direct link to your image.

 

How to repeat a background image

body { background-repeat: repeat }

This code will repeat (tile) your image to fill the element you specified.
repeat is the default value for this property.

If you only want to repeat it vertically then use repeat-y instead of repeat.

To repeat horizontally, use repeat-x. Useful when you want to use vertical color gradient as a background.

To stop the tiling effect, use no-repeat. Then only a single image will be shown.

 

How to set a static/fixed background image

body { background-attachment:fixed; }

If you want the background to scroll with the rest of the page use scroll instead of fixed.

 

How to position the background image

body { background-position: left center; } 

The first value is for horizontal positioning, with acceptable values of left, center or right.
The second value is for vertical positioning, with the values of top, center or bottom.
You can also use pixel or percent, as in 20px 40px (or 30% 10%). The 20px is for x-position from left, and 40px is y-position from top.

 

All the background properties in one declaration

Rather than setting the properties one by one, you can also do it in one declaration e.g.:

body { background: #aa3333 url(YourImageUrl) no-repeat fixed center; }

 

Adding a good non-obtrusive background can help enhance the way you blog look. But remember one thing, inasmuch as you or you think your readers love your background, it is your blog content, not the background that makes your visitors want come back (or not).

For more information regarding CSS background, visit w3schools.com.

 

Technorati Tags: ,

61 comments to "Using image as background"

Anonymous,  May 19, 2009 at 10:57 PM    

thank you so much for your help!
very good explaining ! :D

Greenlava May 20, 2009 at 1:23 AM    

Thank you for stopping by.
Do come again.

Justin De Lucia May 20, 2009 at 2:58 AM    

I'm very confused.

How do you get to the (body) section. Plz, i want help.

Greenlava May 20, 2009 at 11:45 AM    

Hi Justin,
I see you've added a background, but I can't see it in Firefox. Maybe this is the problem:

body { background-image: url(http://fc01.deviantart.com/fs45/f/2009/139/d/6/Super_Justin_Wallpaper_by_Superjustinbros.jpg);background-attachment:fixed }
background:#000033;
margin:0;
color:#ffffff;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

See you have "}" after the word fixed, it should't be there.

Okay, you just replace all the codes shown above with this one:

body { background: #000033 url(http://fc01.deviantart.com/fs45/f/2009/139/d/6/Super_Justin_Wallpaper_by_Superjustinbros.jpg) no-repeat fixed center;
margin:0;
color:#ffffff;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Thanks

alexsia tammy t.m May 20, 2009 at 6:26 PM    

i can't seem to get it right...
How can we change the back ground for
blogskins that have back ground ard?
when i followed ur instructions
no back ground appeared only
the words.
PLease help
tammy_tian97@hotmail.com

Greenlava May 20, 2009 at 9:31 PM    

Hi Tammy,
Please provide me your blog url. Maybe I can take a look at it and find out the problem.
Thanks

Blog Angel (A.K.A. Joella) May 21, 2009 at 9:00 PM    

Your post is sound, it is however hard for some people to fully grasp and apply the concept to their blogs because different platforms and how they structure the template. It's nice to see you are willing to help - @Tammy - your Blogspot profile is not set to public. It's hard for us to find you.

Greenlava May 21, 2009 at 10:35 PM    

Joella,
Nice to hear from you again.

小偉 May 24, 2009 at 8:51 PM    

Hi,
Nice post and nice blog. Thanks for the explanation. Share your posts at: ArticlePinger.com

Greenlava May 24, 2009 at 9:03 PM    

Hey thanks, maybe I'll do that.

Monique August 24, 2009 at 9:20 AM    

Another wonderful tip, thanks for everything. I am having problems changing the color behin the main wrapper/post, the side wrapper

Greenlava August 24, 2009 at 2:49 PM    

Go to Layout>Edit HTML and look for this:
#main-wrapper {
some codes here
}
and
#sidebar-wrapper {
some codes here
}

just insert this code inside the curly braces:
background-color:#99cc99;
replace the hex color code with your own.

Platinum September 25, 2009 at 7:07 PM    

owh , help me , still cant get it ! how to make the center colour is white , and the rest is the background image ?

Greenlava September 26, 2009 at 12:46 AM    

Suraya Nur Suraya,
Go to Layout>Edit HTML and search for #outer-wrapper and body.
To make the center color white, try adding background-color: white to #outer-wrapper, like this:
#outer-wrapper{ background-color: white;}

To use background image for the rest, add url(YourImageUrl) to body:
body { background-image: url(YourImageUrl);}

PJsBuckaroos October 23, 2009 at 12:53 PM    

Hi I am trying to edit my background and I can not get it the way it is suppose to be...I have tried everything that I have found thus far and still can't get it to work...and now even when I put my old background on it doesn't cover the background like it is suppose to it stays in the middle of the page can you please help me...here is the code and my link.Thank you so much in advance.

body {
background:#c2d1e9;
background-image:url(http://i195.photobucket.com/albums/z168/PJsBuckaroos/Image2000.jpg); background-repeat: repeat-y;background-attachment: fixed;background-position: top center;
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;
}

http://pjsbuckaroos.blogspot.com/


Karla

Greenlava October 23, 2009 at 11:36 PM    

PJsBuckaroos,
I don't understand what are you trying to do. Do you want to remove the bird-and-ribbon background?

Linn Marie Hansen November 3, 2009 at 8:29 AM    

I'm trying to have both image and color in my background, but i can't seem to get the image to stick to just the upper part of the page http://asoldesign.blogspot.com if you look at the link. The topimage with the black line is not supposed to repeat itself, but i want it to stop at the bottom of the header and then use the background color that it fades into. Hope you understood what i was trying to explain. It's just so frustrating when nothing works :(

Lynn Pratt November 3, 2009 at 8:23 PM    

Ok, so this is what I put in and it did not do anything but put all my widgets at the bottom of my posts but no image. Any ideas?

body {
background-image: url(http://docs.google.com/Doc?docid=0AVIXRPvnDlg4ZGRmYmJmc3ZfMTRma21jcW1mNw&hl=en);
background-repeat: repeat;background-attachment: fixed;background-position: top center;

This is the blog:
http://stampndesign.blogspot.com
I can not get anything to show a color but a white background. Help!!

Greenlava November 3, 2009 at 9:02 PM    

Linn Marie Hansen,
You want the image to act as left and right borders for the header photo, is that it?
Go to Layout>Edit HTML and look for this:
#header-wrapper {
margin:0;
padding: 0;
background-color: ;
text-align: left;
}

change the code with this one:
#header-wrapper {
margin:0;
padding: 0;
background-color: COLORCODE ;
background: url(http://img407.imageshack.us/img407/5020/bakgrunn.png) no-repeat scroll center 0;
text-align: left;
}
replace COLORCODE with the color for the header background.
To remove the bottom image, find #content-wrapper and delete the background codeline in it. To color the background (below the header part), add in background-color: COLORCODE.
To color the whole background, look for #outer-wrapper.

Linn Marie Hansen November 3, 2009 at 11:09 PM    

Hi
I've tried what you wrote but what the code does is making the background added to the content wrapper go around the header. What I meant was the background added to the body. The one with the black topline. I don't want it to repeat itself down the whole page. Just once at the top, and then go over into just a colorcode. I was able to do this at my other blog, but the same code doesn't seem to work here at blogger. Hope you can help

Greenlava November 3, 2009 at 11:13 PM    

Lynn,
Look for this inside your template code:

< b:skin >< ![CDATA[
/*
/* Navigation tabs start */
a.navitabs, a.navitabs:link, .....

and this:
-----------------------------------------------
Blogger Template Style
Name: Minima

you want cut the first "/*" at the top there, and paste it at the beginning of the dashed line. So the end result will look like this:

< b:skin >< ![CDATA[
/* Navigation tabs start */
a.navitabs, a.navitabs:link, .....

and this:
/* -----------------------------------------------
Blogger Template Style
Name: Minima

That should bring color to your background.
Now about the background image. You need to use a direct link to the image i.e. the link should end with the image file extension such as .jpg, .png etc. You won't get direct links with Google Docs. Try Photobucket, Flickr or Picasa.
An example of a direct link is in comment no.19 above.

Greenlava November 3, 2009 at 11:38 PM    

Linn Marie Hansen,
I see it now. My snail-speed wireless broadband is playing tricks on me 'cause I could not see the silver wallpaper background before. I just saw white background.
Anyway to solve your problem:
Add background-repeat: repeat-x; to the body {}. That should do the trick.

Greenlava November 3, 2009 at 11:48 PM    

Ohh...one more thing, this:
background: #c7c7c7c7;

replace it with:
background-color: #e7e7e7;

Linn Marie Hansen November 3, 2009 at 11:50 PM    

AH thank you SO much! That worked great. I love your blog :D

Greenlava November 4, 2009 at 12:11 AM    

Pleasure's mine Linn Marie :)

Lynn Pratt November 4, 2009 at 2:09 AM    

It worked! It really worked! You are truely the best. Thank you for taking the time to help me.

Lynn Pratt November 4, 2009 at 3:04 AM    

Is there another similar /* trick to change the font style in the main wrapper? Even when I put it in the right way nothing changes.

Greenlava November 4, 2009 at 7:23 PM    

Lynn,
What was the code you use? Post it here...

Lynn Pratt November 5, 2009 at 12:56 AM    

This is what it is now because I changed it back when it did not work. I wanted to make it Freehand591 BT font.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background-color: white;
width: 740px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 535px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Greenlava November 5, 2009 at 2:22 AM    

Lynn,
The problem is in your choice of font (Freehand591 BT).
You need to understand how fonts work. Read this

Lynn Pratt November 5, 2009 at 3:36 AM    

Thank you for putting up with me :)

Remodelaholic November 29, 2009 at 1:37 PM    

Greenlava-

I am about to start hitting my head against a very hard wall! Please help!

I have the image set up to have a 1000 pixel white center, but everytime I link it in, the image creeps into the center of my blog. I tried turning the outer wrapper background white but that made me lose the nice fading edge that I want. hHre is the link, this is my test blog so I don't screw up my good one.

http://figuringoutblogger.blogspot.com/

I hope that seeing the blog will explain my problem. Thanks for all your help, I couldn't have done anything with out it!

Greenlava November 29, 2009 at 3:34 PM    

Remodelahlic,
But your white center is only around 930px wide. The image width is 1030px.
There's nothing wrong with the way the background displays. You just need to edit the image to make it wider.

Anonymous,  December 7, 2009 at 7:00 AM    

Where should I put this body { background-image: url(YourImageUrl);} ?

Greenlava December 7, 2009 at 9:26 PM    

Anonymous,
Go to Dashboard > Layout > Edit HTML tab and find /b:skin in the template code. Put the code right before it.

HJ3 December 11, 2009 at 1:57 AM    

/* Use this with templates/template-twocol.html */

body {
background image:{http://www.nakido.com/BE328A210626462CCEEAC54BB936C7D3EEA43DCA}repeat;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-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;

this is how it loo like,coz im havin problems,i can;t upload pics as my blog background,when i save it,it didn change,it juz turn to white background,hmm do you know what is thy problem?

Greenlava December 11, 2009 at 12:45 PM    

love LJK 4eva,
background image:{http://www.nakido.com/BE328A210626462CCEEAC54BB936C7D3EEA43DCA}repeat;
You need to correct two things here:
1. The image url -it should be a direct link i.e. the url should ends with the image file type such as jpg, png or gif.
2. The correct background code should be like this:
background image:url(THE CORRECTED URL HERE) repeat;
Notice I added "url" and change {} with ().

Linn Marie Hansen February 2, 2010 at 6:15 AM    

Hi, i'm back with another question :P
I'm trying to have two images as a background. If you take a look at this site: http://testasol.blogspot.com/ I want the wood texture I've used there on the whole site, but also I want this picture: http://img407.imageshack.us/img407/1892/asolheaderbak.png as a background behind the headerwrapper so the header will look coherent with everything else. I was able to do this on a blogplatform called iPublish, but can't seem to understand how to do this on blogspot. Really hope you know the answer to this.

Greenlava February 4, 2010 at 12:54 AM    

@Linn Marie Hansen
Try removing the width and adding margin:0 auto; inside #header-wrapper.

Linn Marie Hansen February 4, 2010 at 4:57 AM    

Thank you!! :D

Ahmad Tajuddin May 9, 2010 at 4:58 PM    

sorry to interrupt u but i have a problem how to change all the background images in my blog..this is my blog: http://ata-timetochange.blogspot.com ....the pictures like cup,leaf and what ever is shit for me..i want to change it but i dunno how to do that...please help me..this is my email:ata_1016@yahoo.com

Greenlava May 9, 2010 at 5:44 PM    

@Ahmad Tajuddin Abdullah
Your templates uses lots of background images (more than 10).
Go to Layout>Edit HTML and look for background codes, similar to this one:
background: #000000 url(http://www.templatesimages.com/images/CoffeeDesk/bg_repeat.jpg) repeat-y center top;
Try deleting the codes one by one and Preview the changes each time to find out which code is responsible for which background image.

Ahmad Tajuddin May 10, 2010 at 2:36 AM    

but how to change that images with the other images??like my own pictures...

Greenlava May 10, 2010 at 10:45 AM    

@Ahmad Tajuddin Abdullah
First you have to upload the image to an image host, such as Photobucket, Picasa of Flickr. Once uploaded, get the direct link to the image and use it in this code:
body { background: url(YourImageUrl) no-repeat fixed center; }
replace YourImageUrl with that link.

Ahmad Tajuddin May 13, 2010 at 1:05 AM    

tq....

BioGal July 22, 2010 at 8:48 PM    

Hello, Greenlava - I've tried to do this myself but I need your help, again; sorry.

I would like my icon (from next to my profile on the left) appear around the title and description. So I found the image in Picassa, selected the link for the biggest image (to ensure it covers the width/height of the header) and followed your instructions (putting the code underneath the other code for #header)

:(

Failed.

Would you be so kind as to advise me? You will see that I have made a margin around the title/description - this is to allow the image to appear there a nice border.

Thanks.

Greenlava July 23, 2010 at 1:53 AM    

@BioGal
Here's how to find the direct link.

and you want to apply the background code to #header-wrapper, not #header.
You also want to add the purple color back behind the title and desc. by adding background:#400058; to #header

BioGal July 23, 2010 at 3:45 AM    

Thank you - you are awesome!

Bob Friendship September 30, 2010 at 4:07 AM    

I arrived here as I am looking for ways to add my own background to my Blog. I am at the elementary stage!
Your site is so informative and helpful. I will be back.

Best wishes,

James Fergusson December 9, 2010 at 8:12 AM    

Hi there,
I wanted to know how to just change the color of my blog's sides - that is, the bits left and right of the sidebars. Like yours are green. Perhaps this is explained above but I'm not following.
Thanks, as always, for your help!

Greenlava December 9, 2010 at 4:34 PM    

@James Fergusson
That's the "body" of your template. The easiest way to color it is by going to Design > Template Designer > Advanced > Add CSS and adding this:
body { background-color: khaki;}
but if you were to apply this code alone, your whole blog will turn khaki.
To "keep" the blog column white, you need to add this too:
#outer-wrapper { background-color: white;}

James Fergusson December 14, 2010 at 12:04 AM    

Thanks! I tried this on a test blog and it worked perfectly.

Joshua Stuck December 17, 2010 at 1:27 PM    

I've got a site at wordsignproject.org that I'd like to have justified to the left so that it's centered over the background image I've placed. Couldn't seem to figure that out.

I'd also like to place an image out in the right margin that stays put regardless of which static page you switch to. Not really sure how to just place a static image that's not already nicely coded into the template for me :)

Greenlava December 17, 2010 at 4:38 PM    

@Joshua Stuck
You can start by adding this:
.content {background: url(PUT_IMAGE_URL_HERE) no-repeat right fixed;}
.content-outer {margin:0 auto 0 80px;}

Joshua Stuck December 18, 2010 at 7:39 AM    

Worked perfect! Bad news though :( my blog is too big for most people's screens once the image was placed. The side scroll bar disappears too early when you increase the size of the window and it doesn't scroll you to the full right hand extent of the page.... I know everyones going to tell me to shrink my whole blog... or something but I'd prefer to get the scroll bar to work.

Sheena February 5, 2011 at 7:00 AM    

How do I change the background color of my sidebar with the new Template Designer in Blogger? I've been searching your awesome site but haven't had any luck. :)
Thanks!

Greenlava February 6, 2011 at 1:29 AM    

@Sheena
It's not in the menu. Try adding this snippet in the CSS box:
.main-inner .fauxcolumn-right-outer {background:PUT_COLOR_CODE_HERE;}

Sheena February 6, 2011 at 7:46 AM    

It worked! Thanks! One more thing though. Is there a way to have the background color flow from behind my header down through my sidebar, keeping my posts area white? Does that make sense?

Greenlava February 6, 2011 at 12:33 PM    

@Sheena
Add this to remove the white background:
.content-inner {background-color:none;}

and this to apply white background to the posts area:
.main-inner .column-center-inner {background-color:white;}

Feey1 June 29, 2011 at 7:29 AM    

Is there a way I can make an image a background in my sidebar?

Greenlava June 29, 2011 at 9:05 AM    

@Feey1
Try this code:
.sidebar {background: url(YourImageUrl) repeat;}

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.