Multiple Background Images issues in ie7/ie8

Question

I am trying to solve a bug in ie7/ie8 for multiple background images...

I know that in originally it doesn't support in ie's but i have googled some interesting stuff on web, for example, Cross-Browser Multiple Background

Basically it is of two images background but i want to have 3 images with the defined position and size of the images via css... Fiddle code is not working in ie7/ie8...

http://jsfiddle.net/CsKhy/4/

Can anyone help??

Answer 1

Use nested divs for a crossbrowser-compatible solution.

Demo:
http://jsfiddle.net/CsKhy/5/

Note: background-size is not compatible in IE8 or lower, so maybe it's better using images instead of backgroundimages.

Answer 2

I use

<style>
  .bgImage{width:100%;}
</style>

Right after the body tag and before any other code insert this

<img src="yourimage" class="bgImage"/>

Not ideal solution but is compatible and works, I have used it many times. (make sure your image is a large image to begin with otherwise it will distort on larger screens)