The purpose here is to create a fix image background that would auto fit different sizes of the screen. This has been an issue before on dealing with different sizes of monitor and so to resolve this, we will use a CSS approach.
What it does?
- This solution will and will not do the following though:
- Fixed image on the entire screen
- Scales image
- Retains image aspect ratio
- Cross-browser solution has been observed as much as possible
- Doesn't use script and flash approach
Solution
html {
background: url([IMAGE-LOCATION]) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE-LOCATION]', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE-LOCATION]', sizingMethod='scale')";
}
Note
The last two approach are used for lower IE versions. This requires you to use full image or non-sprite images. Please read this for further information.
Categories
This is the best solution, but , there is another old school method to this ...(This one is more effective when you want the image to be part of html and not a background)
ReplyDeletegive position relative to body and give it a width and height of 100%,
body{
height:100%;
position:relative;
margin:0;
padding:0;
width:100%;
}
Now give your image a class of .cover with position absolute and with of 100%
.cover{
width:100%;
position:absolute;
left:0;
top:0;
z-index:-1;
}
the negative z-index makes sure it lies below all the content
But I would recommend using the method mentioned in your article as it takes the advantage of CSS3 and is more simpler .
great post.. thanks for this.. :P
ReplyDelete