Full Page Background Image

  • follow us in feedly
Published April 13, 2013 by Brad Knutson
Full Page Background Image

I recently found a need to have a full page background image for a client’s landing page. I could create an image that is abnormally large to account for various screen sizes and ensure that the image covers the background on even the largest screens, but this isn’t responsive at all.

What we need is a method to have a background image that is fixed to the background of a page, regardless of screen size or orientation. Technically, we could write a Javascript function to do this (I’ve done that before), but there is actually an easy CSS method to perform this action.

Say hello to the background-size property.


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;


Full Page Background Image

View Demo

This design method is becoming increasingly popular today, and is supported across most of the major browsers.

  • Safari 3+
  • Chrome
  • IE 9+
  • Opera 10+
  • Firefox 4+

There certainly are other ways to do this, and Chris Coyier wrote a great article about Perfect Full Page Background Images that goes over multiple alternative methods, but personally I prefer the background-size method.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “Full Page Background Image

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">