There are two techniques shown in the Perfect Full Page Background Image article. I'll show you both but each has it's own pros and cons. Note that I've never used neither of these techniques before.
Both techniques only resize the background image larger but not smaller (it crops the image when the window is smaller than the image) therefore the image size should be the minimum browser window size that you want to accomodate for.
Technique #1 is the more complicated of the two techniques and has the following bugs:
In Safari 4 & Chrome, the min-height isn’t catching and doesn’t resize vertically to fit.
Technique #2 is simpler and bug-free, however, the main content doesn't center in IE 7 and it doesn't work at all in IE 6.
Technique #1
<body>
<div id="cont"><!-- To make page scrollable -->
<!-- Put your usual HTML here -->
</div>
<div id="bg"><!-- For background image -->
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/bg.jpg" alt=""/>
</td>
</tr>
</table>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height: 100%;
width: 100%;
overflow: hidden;
}
#bg {
position: fixed;
}
#bg div {
height: 200%;
left: -50%;
position: absolute;
top: -50%;
width: 200%;
}
#bg td {
text-align: center;
vertical-align: middle;
}
#bg img {
margin: 0 auto;
min-height: 50%;
min-width: 50%;
}
#cont {
position: absolute;
top: 0;
left: 0;
z-index: 70;
overflow: auto;
}
Technique #2
<body>
<img class="bg" src="images/bg.jpg">
<!-- Put your usual HTML here -->
</body>
You need to change min-width: 1024px; according to the size of your image.
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
div#content {
/* We need our content to show up on top of the background */
position: relative;
}
cpokrywka
){kind=link}