How to Make an Image Cover the Entire Webpage Background with CSS3

CSS3 includes many fabulous new tricks. One of those is the background-size attribute which I will demonstrate below. This is what I have found to be the best way to make a background image cover the entire webpage background regardless of the screen size or browser window size. Also, this is a nice new modern cross-browser method that works in most modern browsers including:

  • Safari 3 and above
  • Firefox version 3.6 and higher
  • Internet Explorer 9 and above
  • Chrome
  • Opera 10 and above

CSS3 Style to Make Image Cover Whole Page Background

Here is the css style to add to any webpage to add a background image that covers the entire page background:

<style>

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

</style>

Conclusion

This method works great for almost every site I've used it on, so give it a chance. I know CSS3 still scares some people, but using it is a pretty safe bet these days. It's been around long enough now to be considered the standard in my opinion. Some of you may have noticed that I have SEO as a category for this article. Why? That is because proper mobile development is beginning to effect search results inĀ  Google as of April of 2015, so sites with correct mobile optimization will get ranked better! So optimize your website for mobile devices today or you may lose your Google rank!

Leave a Reply

Your email address will not be published. Required fields are marked *