I have a div that I use as a transparent background when a lightbox appears. However how can I get the div to fill the whole screen even when the user scrolls? At the moment I have the width was 100% and the height as 700%. This fills the whole screen but it changes depending on the screen resolution etc. Is there a way I can make sure the the div will cover the whole page regards of the users settings?

 

Thanks for any help.

messed up the posting somehow :S see below....

try...

 

This XHTML

 

<div class="fullscreen">Content please</div>

 

with this CSS...

 

<style type="text/css">

body{ height:100% }

div.fullscreen{

display:block;

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

 

</style>

you might need to add a

body {

margin:0;

padding:0;

}

 

as well.

Thanks for your help. This fills the whole screen but then as soon as I scroll it doesn't fit the screen. Maybe I need to use jquery or something. I'm not sure.

what do you mean it doesn't fit when you scroll down? are you looking for a fixed background?