CSS Instance analysis: Perfect full page background picture

We have previously known the concept of resizable background images. But reader Doug Shults sent me a link, which uses very cool technology, and I think it's better than any technology before.

The background image shown above and the technology used are derived from this website.

The following are the effects of this technique:

• Fill the entire page with a picture, no blank
• Show pictures proportionally according to your needs
• Maintain picture proportions
• Picture centered on page
• There's no scroll bar.
• Cross-browser compatibility
• Not some kind of fancy trick, like Flash.

This is a very high requirement and we will use a variety of techniques to achieve this effect. First of all, because the picture to scale proportionally, the traditional background-image attribute has not been able to achieve this effect, so that we can only use inline pictures.

Technology 1

This inline image will be placed in a series of encapsulated elements, each of which is essential to our goal.

<div id="bg">
    <div>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    
                </td>
            </tr>
        </table>
    </div>
</div>

The CSS code is:

* {
    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%;
}

Markup language and CSS are really cumbersome, but the effect is very good! It's already done, but what if we want real content on the page? Setting the overflow property of the HTML and body elements to hidden is a bit of a concern for you, because in a Web site without a scroll bar, it will completely remove content that is outside the range. In order for the scrollable content to be displayed correctly, we will introduce another package element. It will be in front of the background, the width and height is the size of the fully expanded browser, and the overflow property will be set back to auto (scrollable). Then we can safely put the content into this package element.

<div id="cont">
    <div class="box">
          <!-- content in here -->
    </div>
</div>

#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; }
          

View Sample Download File

Bugs currently in existence

In SAFAR4 and Chrome, the Min-height attribute does not work and cannot be vertically adapted to size.

Technology 2

Or, as always, thank Doug Neiner for this approach.

Here, we can do this without JavaScript fixes, just with CSS. The picture is also an inline picture, the class name is called "BG", and there is no additional markup language. This will satisfy all those who do not like the extra tags.

The only point to note is that this method does not work under any layout, it cannot be centered in the IE7, it does not work in IE6, and depending on the size of the original picture, it may not always appear proportionally. However, because this method is simple, and there is no bug, it is definitely available for reference. Here is the CSS:

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 {* * * is the ' only important ' rule////* We need our content ' 

        Ackground * * position:relative;
        /* These have no effect on the functionality * * * WIDTH:500PX;
        margin:0 Auto;
        Background: #fff;
        padding:20px;
        Font-family:helvetica, Arial, Sans-serif;
        font-size:10pt;
        line-height:16pt;
        -moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px; } body {/* These rules have no effect on the functionality * *They are for styling only * * * margin:0;
padding:20px 0 0 0; }

View Sample

Original: Perfect full page background image