Fullscreen Background image -?

[kade119]

What would be the best method to implement a fullscreen background that is resized based on the resolution/browser size?

would a fluid css layout be best... i just know when i do it w/ css - and move the browser in so it's more vertical.. the background image doesn't extend to the bottom...

like so

#background {
    z-index:-6;
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%;



 <div id="background">
<img src="graphics/bg-1.jpg" width="100%"alt="crowd">

</div>
}

or with javascript?

thanks

[Shadowfiend]

The way you described is one of the ``best''. There are ways with Javascript, too, particularly involving the canvas element.

However, the short answer is, you don't. It's a bad idea. Background images that need to be full screen are usually bad background images. At least if their full-screen-ness can't be achieved by using background repetition via CSS.

[kade119]

well if they client demands a full screen background image.. well its sortof a must - but you do believe that the css route is one of the better ways to do this.. even over js, right?

The only thing about doing it w/ css - is that if i move the browser in horizontally so it's a very vertical browser, it add's a lot of white space to the bottom, anyway around this?

[Shadowfiend]

Can we see what you're trying to do? It really depends on the image.

[smoseley]

If you want something "full screen" you're best off starting with an image that's 3000 x 2000 or thereabouts (making sure the object of interest is in the center 1600px of the image) and cropping it for smaller resolutions.

[smoseley]

Here's a full-screen background image we recently implemented in a client design:

http://www.deadoro.com/

It's not a photo, but a pair of curvy graphics - one top and one bottom - that frame the site.