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-repeat

In 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: blogger, background images, css, blogatech