CodingForums.com - View Single Post

SB65 · 10-06-2012, 08:50 AM

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.

10-06-2012, 08:50 AM	PM User \| #2
SB65 Senior Coder Join Date: Feb 2009 Location: West Yorkshire Posts: 2,827 Thanks: 9 Thanked 685 Times in 679 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 08:54 AM..