Full Screen Background Image - Pure CSS Code
This is a simple tutorial that teaches you how to create a full screen background image for any sized screen or browser window using pure css code.
This method is cross-browser compatible and doesn't require any javascript or flash.
View the Demo
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
HTML
<body>
<img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" />
<div id="wrapper">
<p>Content goes here...</p>
</div>
</body>