Resizeable background for 1 page layout with multiple sections

I have a horizontal site with 8 sections a开发者_如何学Pythonll requiring a full background image that needs to re-size with the browser. Please look at: http://www.dancephotography.net.au/test1.htm

Be gentle... I'm a novice with no flash knowledge. This is an unfinished design that will become a template for other pages.

---

@belinda; you can dot it with css3 cover property

.wrap {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

& for IE you can you FILTER

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

or you can use 100% like this.

.wrap {
            background: url(images/bg.jpg) no-repeat center center fixed;
            -webkit-background-size: 100%;
            -moz-background-size: 100%;
            -o-background-size: 100%;
            background-size: 100%;
    }

it's stretch the image according to the heigfht & width of the div. FOR MORE CHECK THIS LINK http://css-tricks.com/3458-perfect-full-page-background-image/

---

Using a div with an img underneath everything would be a lot easier, as you could set a maximum/minimum width and or height so that the image doesn't distort too awkwardly.

This solution is not CSS3 specific, so any browser should behave the same way. I've typed up an example for you which can be found at http://jsfiddle.net/Qzcnn/.