css full image background

below is sample of Perfect Full Page Background Image, Awesome, Easy, Progressive with CSS3 Way

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Works in:

Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

CSS-Only with Technique #2
html:

<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>

css:

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Works in:

Safari / Chrome / Firefox (didn’t test very far back, but recent versions are fine)
IE 8+
Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)

source: http://css-tricks.com

  1. Leave a comment

Leave a comment

Design a site like this with WordPress.com
Get started