Fixed background

kyleha

New Member
Hi i need a little help. i want to add a background image to a div on top of the body div so that the body and all other content will flow behind it while this particular background image remains in place on the screen. when i try to add background-attachment: fixed to this div, however, it does not work. I am only able to get the main body background to stay fixed, which i do not want.

how can i accomplish this, having all content, including the main background flow "below" a given image. an example of what i am trying to do is here:

http://www.csszengarden.com/?cssfile=069/069.css

note how the black edges stay in place while everything looks to move underneath them.
 

leroy30

New Member
Set the position style of the div to 'fixed' and then set the left and top co-ordinates relative to the window.

i.e.
<div style="width:100%;height:100%;background:url('myimage.jpg');position:fixed;left:0px;top:0px;"></div>
 

PixelPusher

Super Moderator
Staff member
Dealing with 100% height can be a little tricky at times. Typically to get an element to display 100% height it needs a defined parent height (so the element knows what to be a 100% of)

I suggest adding this also,
Code:
html, body {
   height:100%;
}
 
Top