What is Css3 Cover?
With the wide range of mobile devices and browser sizes available, responsive design has become a viable solution for most websites. Many web designers use responsive techniques to create beautiful experiences for their users, regardless of what device they are using. Another trend lately is to implement a full size background image for their website. Some designers may use jQuery to do the work for them. However, there is a simpler technique using CSS3 cover. This technique fills the browser proportionally with the image that you specify. Today, you will learn how CS3 Cover works.
You can apply the following CSS to your body tag. It is fairly simple, you just have to remember the various prefixes that go along with it.
body {
background: url('images/body-bg.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
Below is a preview of our background inside of the browser. The browser width was roughly about 675px. I added some very large text to the page so you could see how the browser responds with content. It also puts the browser size into perspective.
This is an example of the same background, only the browser size is now roughly 1400px wide. CSS3 cover does a good job of proportionally filling the background with the image.
Something to remember is that it doesn’t work in Internet Explorer below version 9. If this is no concern to you, CSS3 Cover is a nice option for filling the browser with your background image. This will help your site to be more consistent across different browsers.
Conclusion
CSS3 Cover is a great option for implementing background images in your website. With very little work, you can implement your own custom image, without using media queries or javascript to get the job done. Just be careful how large you make your images. Longer load times will drive visitors away and cause a lot of frustration.
What is your favorite CSS3 property? How does it make your site better? Share your thoughts in the comments section below.
