Positioning multiple background images

Hello all!
after some research online i got the impression you could do some positioning of background images.
I tried this:

#bGroundImg{
background:url('imgs/lgCityLft.png')top left no-repeat;
background:url('imgs/lgCityRt.png')top right no-repeat;
}

but it only displayed one of the images.
was wondering what I am doing wrong?
Thx
D

Use a comma separated list for the image urls. All you have done is overwrite one image with another :slight_smile:


background: url(imgs/lgCityLft.png) top left no-repeat, url(imgs/lgCityRt.png) top right no-repeat; 

Remember to supply a fallback fro browsers that don’t understand the multiple backgrounds.

e.g.


background: url(imgs/alternate.png) top left no-repeat;/* for old browsers*/ 
background: url(imgs/lgCityLft.png) top left no-repeat, url(imgs/lgCityRt.png) top right no-repeat; 

Have a look here for more info.

pdxSherpa, on the long shot that this post has anything to do with your Jewelry page, be aware that I put the background images in separate containers specifically so the page would be IE8 compatible.

Paul, thank you and also thanks for the reminder of providing a fallback (have not been doing that, need to go back & look into that)
Ronpat, actually i don’t have a jewelry site/page :slight_smile:
but your solution is good to know, how did you position the two containers please?
thx & you all have a great day (yey, go monday!)

I pulled a similar ‘blooper’ when exchanging a post with ‘the other’ poster :lol: It seems that I am indeed mixing the two of you in my head. Now I know who the two parties are, maybe I can mend the confusion. :slight_smile:

The containers were simply nested and one background image was assigned to each. You can nest any number of divs with background images to achieve the same look that you get with CSS3’s serial background images. The background image in each container is positioned in its respective background declaration; eg: left top, right bottom, 0 50%, etc.


<div class="outer">
    <div class="inner">
        <div class="cave">
        </div>
    </div>
</div>