February 15, 2014 / IST / How-to Guides, Web Development.

baclground-css

Full Page Background Image makes website very attractive. If you know basic HTML and CSS code than you can design. Background image on a website that covers the entire browser window at all times. Let’s put some specifics on it:

  • Fills entire page with image, no white space
  • Scales image as needed
  • Retains image proportions (aspect ratio)
  • Image is centered on page
  • Does not cause scrollbars
  • As cross-browser compatible as possible
  • Isn’t some fancy shenanigans like Flash

Progressive CSS3 Trick to set background

We’ll use the html element (better than body as it’s always at least the height of the browser window). We set a fixed and centered background on it, then adjust it’s size using background-size set to the cover keyword.

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

 Works in:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

View Demo

CSS-Only Technique with <IMG> Element

Here we use an inline <img> element, which will be able to resize in any browser. We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.

The especially clever bit is using a media query to check if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless.

Here is the CSS:

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Works in:

  • Any version of good browsers: Safari / Chrome / Opera / Firefox
  • IE 6: Borked – but probably fixable if you use some kind of fixed positioning shim
  • IE 7/8: Mostly works, doesn’t center at small sizes but fills screen fine
  • IE 9: Works

View Demo

Now Download and Enjoy!

Dlownload