Call Today
}
Hours

Mon – Fri, 8am to 5pm

Fill Your Website Background With CSS3 Cover

by | Dec 13, 2012 | CSS3, Tutorials, Web Design, Web Development | 1 comment

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.

small css3 Cover CSS3 Cover

 

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.

Divi WordPress Theme