Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    49
    Thanked 1 Time in 1 Post

    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.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The div #bunting includes all the login links etc, and has the background image. Try making the css:

    Code:
    #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.
    Last edited by SB65; 10-06-2012 at 09:54 AM.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    274
    Thanks
    49
    Thanked 1 Time in 1 Post
    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?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •