More on Using CSS3 Multiple Background Images with Blogger

Back in March, I wrote about CSS3 multiple background images and using them with Blogger. There were some issues with the background rendering in some browsers when I wrote in March. Now, a mere 2 months later, it seems that with updated browser programming on most of the popular browsers, the issue is resolved. Older browser versions will show only a white background which is not a bad thing since the priority for me is that people read my blog and find something of interest.

First, one needs the individual images for the background. I use 3 -- an image for the left side, an image for the right side, and an image for the center of my blog. When I first wrote and tried using CSS3 multiple image coding, I created and used transparent pngs. The pixelation around the edges showed through and I wasn't pleased with the result.

Since then, I've been playing around with editing images to solve this problem and what I discovered is that using the center background color (or texture if that is what your Blogger background includes) as the background color on the actual images for my left and right hand borders works better than transparency. I do think the background and borders now look just how I envisioned.

This is the coding I ended up using successfully:

body {

   background:

url("left-image.png") top left no-repeat,

url("right-image.png") top right no-repeat,

url("center-background-image.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;

  }

I've copied the entire section from my Blogger html coding because this is where the changes need to be made.

With regard to my image sizing, my left image ended up being 216 pixels wide, the right image is 181 pixels wide, and the center background is 1415 pixels. I don't think the width of the background image is important as long as it is wide enough to fill the open space you have. Your images may need to be wider or narrower depending on the format of your blog. I played with sizing a bit before I found what worked for my blog. There may be a mathematical way to figure this and if you are a math whiz who resolves this, I invite you to share the information in the comments below.

W3Schools has an understandable tutorial regarding using CSS3 in this way. I also found this excellent YouTube video which explains the coding in a way even a novice can understand:

I hope this helps you. Enjoy and I would love to hear how you use this along with a link to your blog or website so I can see what you've done.

Have a wonderful week and blessed day,

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