Update Your Blogger Background Using Multiple Background Images & CSS

There are so many really well designed and cute Blogger templates available. Most are one graphic with a decorative border or borders and solid center where blog content and the sidebar are visible and are uploaded to a service like PhotoBucket or Picasa. These work well in some instances but I recently had to buy a newer computer which has a slightly different sized screen than my previous one.

When I looked at my blog, the only way the background worked was to reduce the size of the text so small that with my eyesight it became impossible to read comfortably.

Researching how to solve this problem and keep an attractive background led me to CSS (cascading style sheets) styling which allows placement of multiple background images. There are quite a few articles written about this on the web searchable through Google.

For the lay person (like me), I thought I would share how I broke down my blog background into three images and placed them within the xml coding. I use the minima 2-column template.

This was how my previous one-piece background coding looked:

body {

  background:$bgcolor;

  url(http://i604.photobucket.com/albums/tt127/dpeagreendesigns/BlogBackground.jpg);

  margin:0;

  color:$textcolor;

  font: x-small Georgia Serif;

  font-size/* */:/**/small;

  font-size: /**/small;

  text-align: center;

  }

I broke my column graphics off into two separate images keeping them approximately 200 pixels or less wide and 685 pixels long. I created the center background from what was left though one could probably use a small seamless tile and add those directions to the CSS. I uploaded these three graphics to my free Comcast personal web page and then coded as follows:

body {
   background: url("http://home.comcast.net/~dpeagreendesigns/LHBorder.png") top left no-repeat, url("http://home.comcast.net/~dpeagreendesigns/RHBorder.png") top right no-repeat, url("http://home.comcast.net/~dpeagreendesigns/CenterBkgrd.png") center top no-repeat;
  background-attachment: fixed;
  margin:0;
  color:$textcolor;
  font: x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

The highlighted coding provides the border and background graphics on this page. It is important to remember the last image (url) is the one which will be at the bottom of the layers. If you look at my background here and compare it to the coding above, I think it will help to make sense of how this multiple background layering can work for a blog.

If you decide to play around with this, I encourage you to use a "test blog". In any event, please make sure you save the existing html template you are using so that if frustration sets in, you can copy and paste the original html coding back into your template. 

There is more information available at the w3Schools website as well as at W3C.org.

I am still working on the cross-browser issues this coding has with Internet Explorer but it works beautifully with Firefox. I did use BrowserShots which allows you to view screenshots of a page in many different browsers and those that won't translate the CSS merely have a white background so content can be read. 

More on this as I learn . . .