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,