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.
The address we got from Photobucket:
Our original body selector code:
font:x-small Georgia Serif;
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