background image to overlay other layers
 

Hi. On this website, I need the layer with bunting to display over the top of all other layers. (bunting is the line of flags)

I want this to happen without the bunting layer pushing other layers down.

i.e. I want the layer to 'float' above all others.

How can I do this?

I tried using z-index but this has not worked.

The div #bunting includes all the login links etc, and has the background image. Try making the css:

z-index isn't going to make any difference because #bunting contains all the elements you're trying to rearrange. Giving the element padding-top pushes the content down without changing the position of the background, and setting no-repeat means the image will only show once.

EDIT: Reading your post again I'm not quite certain that's the effect you want...if you just want the bunting to be on top of #container then you need to rearrange your html so #bunting doesn't include #container. Then you can use z-index to position it on top of #container.

Thanks.

That is an improvement.

However, maybe I shouldn't be using a background image. I'd like the bunting to overlay everything else. Like this.

Is this possible?

Yes, although see my edit for an alternate option which might be what you want. You can use position:absolute to position either a layer with a background image (or just the image itself) on top of any element. Again this will mean amending your html to move #container out of #bunting.

Hi there SRD75,
You should bear in mind, though, that positioning anything above links or forms will make them inoperable. :eek:

coothead