Helman's Blog

Hi buddies, this is another cool stuff from CSS3, something that call ‘background-size’, where you can use this to customize you website to have FULL BACKGROUND.

Is that sound good, great, amazing, this is cool man. I will show you, how to use it. what you need is only browser that compatible with CSS3:

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

Why we need to use html as the tag ? that is because of the window size that we gonna use, not the document. Very simple

and this one is for CSS2:
1. you need 1 container (div) and 1 image (img):

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

2. apply the 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%;
}

that is only.
thanks for you to stop by and read this. 😀 and sorry, I’m not putting any demo page for it. I’ll try to put it latter.

Cheers,
helman

Tagged background, background-size, cover, CSS, CSS2, CSS3, margin, moz, o, position, webkit