written by Shannon Lynd on Friday, April 26, 2013
Do you want your background image to resize with the browser and span the full width and height of the browser? Here's the code:
The HTML
<body>
<div class="sitebackground">
<div class="content">This is the site content ... </div>
</div>
</body>
The CSS
.sitebackground {
background: url(/img/content/pic.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {padding:0; margin:0;}
.content {width:500px;
margin:0 auto;
background:#fff; padding:40px;}