Apr 19, 2007

Adding Background Images to Blogger

A main aesthetic in site design involves adding background images to the various elements of your blog. In this tutorial we are going to add background images to the body of our blog but the basic principals would apply for adding them to your header, sidebar, main post area or any other block element of your site.

For starters you will need to take into consideration the size of the image you're going to use. A smaller image that tiles will cover the entire background and won't slow down your site's load time like a larger image would. How you want your image to display is another consideration. Will it be in a fixed position? Do you want it to repeat on the left side of your blog as the page is scrolled down or should it just display at the top corner. You will see that with CSS you have complete control of how and where your image will display.

Once you have decided on a image to use, you will want to size it appropriately and upload it to a hosting service. If you need further information on preforming these activities just click the highlighted text to visit a post on these subjects.

Next we are going to access our Blogger template editor. In the style section of your template you will find the body selector. In this example we are using the Minima template but these instruction would be similar with most Blogger templates. Be sure to make a backup copy of your template prior to making any changes so you can revert to your original template if something goes wrong.

In the example we are going to use the image below and start by taking the address that Photobucket gave us and add it to the body selector of our style sheet.

Image



The address we got from Photobucket:

http://i76.photobucket.com/albums/j38/stratman4u/chaosback.gif

Our original body selector code:

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

Example using no-repeatIn this first example we are going to place the image so that it won't repeat and by default it will display in the top left corner. We only need to change one line form the above code.

Change this line of code:

background:#FFF;

To this:

background: url(http://i76.photobucket.com/albums/j38/stratman4u/chaosback.gif) no-repeat;

Here is the results:





Example using repeat
By changing our one line of code to this:

background: url(http://i76.photobucket.com/albums/j38/stratman4u/chaosback.gif) repeat;

We get this:



We can go one step further and add a white background to the outer-wrapper selector by adding one line of code as shown in blue below:

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


We would end up with this:





Example using repeat x,y
If you want the image to repeat horizontially across the page, we again change the one line of code in our body selector to read:

background: url(http://i76.photobucket.com/albums/j38/stratman4u/chaosback.gif) repeat-x;

Results of repeat-x:



Lastly, changing our code to that below displays our image vertically up and down our page:

background: url(http://i76.photobucket.com/albums/j38/stratman4u/chaosback.gif) repeat-y;

Results of repeat-y:






Besides the background: property that we used above that lets us set one or several attributes in one declaration, you can use these other indiviual properties to style your background as well:

background-color:(Possible Values) #000000, transparant; (where #0000 = a hexidecimal color code)

background-image:(Possible Values) url, none;

background-position:(Possible Values) top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos;

background-attachment:(Possible Values) scroll, fixed;

Technorati Tags: , , ,

25 comments:

Jeni said...

Thank you so much for these great instructions - I know nothing about HTML but was able to get the background I wanted!

princessinferno said...

Thanks!

suppppppppperdave said...

Thanks also, this was very useful!

crayons said...

Thank you so much! You're a big help!

Jackie Parker said...

I'm curious as to why when I do this, the background shows up in FIREFOX, but not in IE.

Any tips you've got are welcome!

Thanks!

umbrella head said...

brilliant! ive tryed various different codes and stuff, copying and pasting everything and anything. your instructions work perfectly!

hambaallah96 said...

thanks for the advice....but.....how do i make it fixed?

Paige Roberts said...

Among other tutorials that I've tried, none of them have worked. Maybe you just explained yours better. ? Yes, thanks very much

Edgar Johnson said...

Thanks a A LOT!!! Very good guide Merry Christmas GOD BLESS

Ram said...

Thanks Thanks Thanks.

My Dog-Eared Pages said...

Thank you SO much. Your instructions are perfect!!

♥ Уαšмıиē ♥ said...

For some random reason, whenever I try to do mine the backround always remains the same (minimal) and I'm following everything I should... :S

WEDNESDAY said...

thanks this was ace!

Anonymous said...

thanks for the instruction, i don;t know how to customize my blog, but from your instruction, i wish i can do it easily..... thanks dude.......
nur_septianto@yahoo.com

maukku said...

thankyou! you saved my life..and blog

Katey said...

Thank you heaps!!!

Den said...

Thank you for the most excellent instructions, I have question please, whats the line of code to Stretch one background image, Ive been trying to do this for my Blog, instead of it looking like tile effect with repeat code, an no-repeat code its way to small of a background, Thank you if you can help.

Costas Schuler said...

You helped me publish my latest blog:
http://bathroomkey.blogspot.com/

ultramarine said...

Thanks so much. I just fixed my blog background thanks to you :-)

KM Lim said...

hello! this is simply awesome!! Thnx!

God bless you! XD

Katelynkat said...

Thank you so much! I've been on multiple sites hoping to find directions on changing my background, but yours are the only ones I could follow and use!

Six said...

I can't figure out where to put background stretch and scroll. Everything I've tried just won't work. any help would be greatful.

Roam Rome said...

if didnt pull the photo from photobucket, do i still use the photobucket website url?? if not, what do i use then?? Thanks.

Nouveau Events & Designs said...

Thanks so much for this info! I have most of it down, but I can't seem to get it to stay in position as a background. I'm using a business logo so it doesn't work as a repeat. I tried adding the "background-attachment: scroll, fixed;" but it doesn't pick it up, still. Any advice on how I can fix that part?

Farah said...

thanks a lot....