完美的全页背景图片

Posted 2021-02-26

This is a very tall order, and we are going to be pulling out all kinds of different stuff to make it happen. First of all, because the image needs to scale, a traditional CSS background-image is already disqualified. That leaves us with an inline image. This inline image is going to be placed on the page inside of a bunch of wrappers, each necessary for accomplishing all our goals. WORKS WITH IE7+

// html
 
<div id="bg">
    <div>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img src="images/bg.jpg" alt=""/>
                </td>
            </tr>
        </table>
    </div>
</div>
 
<div id="cont">
    <div class="box">
          <!-- content in here -->
    </div>
</div>
 
 
// CSS
 
* {
    margin: 0;
    padding: 0;
}
 
html, body, #bg, #bg table, #bg td {
    height:100%;
    width:100%;
    overflow:hidden;
}
 
#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;
}
 
.box {
    margin: 0 auto;
    width: 400px;
    padding: 50px;
    background: white;
    padding-bottom:100px;
    font: 14px/2.2 Georgia, Serif;
}