Creating css full screen layout - html

Question

Endles trying to create a css layout
<div id="act"><img src="img/home01.jpg"></div>
<div id="buttons></div>
img "home01" should fit the screen. No scrolls, no whitespaces, no overflows, whatever is the monitor size and whatever is the img original size.
div buttons should be available for clicking, i.e. in front of the img "home01" (higher z-index) and centered hor&ver on the screen.
Please help.

Answer 1

First you have to set style to your div id="act" to cover whole screen
like
#act{
position:absolute;
left:0; top:0; right:0; bottom:0;
height:100%; width:100%;
}
Now, there is image inside your div, so set style to that image like
img { min-width:100%;min-height:100%; }

Answer 2

<div id="act">
<div id="buttons">
<button>test1</button>
<button>test2</button>
<button>test3</button>
</div>
<div id="content"></div>
</div>
#act {
position: absolute;
width: 100%;
height: 100%;
background-image: url( "http://hdwallpaperpics.com/wallpaper/picture/image/Opera-Background-Blue-Swirls.jpg" );
}
#buttons {
position: absolute;
}

Answer 3

have you tried width:100%? If the img is a background image (tileable) use background: url('img/home01.jpg') repeat-x
The buttons should be over the image? then you should change your html a little bit. Put them inside the first div. CLOSE the img tag, if you really need it.
fiddle

Answer 4

Here is the working fiddle: http://jsfiddle.net/surendraVsingh/ZpvsC/
HTML
<div id="act"><img src="http://images.travelpod.com/tripwow/photos/ta-00ad-668e-a3e6/night-gondeliers-venice-italy%2B1152_12878015263-tpfil02aw-3646.jpg"></div>
<div id="buttons">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>​
CSS
#act img{width:100%; overflow:hidden; position:relative;}
#buttons{position:absolute; z-index:999; top:20px; right:5%; color:#fff; display:block;}
#buttons li{display:inline-block; margin:0 5px 0 0;}
​