Adding a full size background image to a website can be difficult, given the variety of browsers currently in use. However, Fuel Your Creativity recently posted an excellent article explaining how to go about this, using two very different approaches. I highly recommend reading the full article for details.
The first approach uses a combination of HTML and CSS.
HTML
<body> <div id="stage"> <img src="background2.JPG"alt="sitebackground" /> </div> </body> </html>
CSS
#stage {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#stage img {
position:absolute;
margin:auto;
min-width:50%;
min-height:50%;
top:0;
left:0;
right:0;
bottom:0;
}
@media screen and (max-width: 512px) {
#stage img {
width:100%;
height:auto;
}
The second approach relies upon CSS3. Note that not all browswer support this yet.
body {
background: url('images/body-bg.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
In the past, I have used the following approach. It is NOT as good as the approaches mentioned above.
body {
margin:0;
padding:0;
background-image: url('largebackground.jpg');
background-repeat: no-repeat;
background-color: #15512b;
background-position:center;
background-attachment:fixed;
background-size: 100% 100%;
}