CSS div background image help

Question

I want to have a CSS div that has a background image (the full image size is 950px x 306px), that shows the entire background image, and that adjusts the sizing of the background image depending on the browser size.

So the CSS div code should:

• Have a background image of some picture with a max width of 950px and max height 306px
• Show that entire background image (adjust the image size to fill the entire div)
• Resize itself automatically depending on size of the the enclosing div / browser width (some definition like width="100%")

Can someone please help with this? I'm really new to CSS and have been trying many different methods but none seem to work. I really appreciate your help!

P.S. No JQuery please :)

Answer 1

You could do this.

body{margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
    overflow:hidden;
}

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

http://jsfiddle.net/jasongennaro/nTLXA/1/

Then position divs on top of this.

Answer 2

If you want it to resize for the user's browser, it'll have to be dynamic. You cannot do that with CSS alone.
This may be of use: http://imageresizing.net/

Answer 3

body
{
background-image:url('image.gif');
background-size:100% 100%;
}