Stacking order for CSS3 multiple background images

This is the scenario I had. I had a div that I wanted a top image no-repeat, middle image with a repeat-y on it, and then a bottom image with no-repeat. To make this work I had to write the code like this:

background: url(‘images/SideBarBack_03.jpg’) no-repeat center bottom, url(‘images/SideBarBack_01.jpg’) no-repeat center top, url(‘images/SideBarBack_02.jpg’) repeat-y;

As you can see the _01, _02, _03 represent top, middle, and bottom. What I had to do was put the bottom image as the first image to display with a center bottom background position, then the top image with center top background position, and last the repeating image as center center.

I tried all different ways and found that this works for me. Don’t forget that this is only supported in Firefox, IE9, and Safari. You will have to create a fallback method for the older browsers that you are going to support. For now I only go back as far as IE7.

There could definitely be other ways to do this but I have found that this works for me.

Hope this is helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *