Solved: 2 Left And Right Background Pictures

[pwired]

Hi,

Something to share.

I always wondered how those cool sites made it work with 2 different background pictures,

one on the left and a second one on the right side of their webshop. It´s a cool way to

show new products, slogans, or eyecatchers.

I found this code working for me:

   background-image: url(../image/bg_left.jpg), url(../image/bg_right.jpg);
   background-repeat: no-repeat;
   background-position: left top, right top;
   background-attachment: fixed;

I found all the good code here where you can even see more examples to use more than 2 pictures

on different background positions:

http://www.css3.info/preview/multiple-backgrounds/

Have fun.

[marcus]

Also necessary, browser support for this: http://caniuse.com/#feat=multibackgrounds

[Pete]

I didn't even know you could do this.

Since I mostly seem to shop on or visit sites that are fixed width I thought they were just using one large background image and a transparent gif over the top to make the clickable so this is all pretty interesting

[Martijn Geerts]

If you want to use max 3 backgrounds, maybe better to use pseudo elelemts :before & after...

Those have support for IE8 and up. (but don't do fancy stuff with z-index, as IE8 won't respect those)