background image to overlay other layers

[SRD75]

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.

[SB65]

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

#bunting {
    background: url("/image/bunting.png") no-repeat scroll 0 0 transparent;
    /*height: 61px;*/
    margin: 0 auto;
    position: relative;
    width: 880px;
    /*z-index: 9999;*/
   padding-top:61px

}

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.

[SRD75]

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?

[SB65]

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.

[coothead]

Hi there SRD75,

I'd like the bunting to overlay everything else.

You should bear in mind, though, that positioning anything above links or forms will make them inoperable.

coothead