Css: Stretching a background image to 100% width and height of the screen?

Setting the foundation

Basic CSS rules

Let’s establish the crucial CSS rules to make sure the background image covers the screen across different browsers and devices:

html, body {
  /* We start by getting rid of the party poopers */
  height: 100%; 
  margin: 0;
  padding: 0; /* No unwanted space */
}

body {
  /* The 'no-repeat' here stops the clones invasion */
  background: url('your-image.jpg') no-repeat center center fixed;
  
  /* Backwards compatibility for the 'golden oldies' */
  -webkit-background-size: cover; /* Safari 3-4 */
  -moz-background-size: cover;    /* Early Firefox */
  -o-background-size: cover;      /* Early Opera */
  
  /* Standard syntax */
  background-size: cover;         
}


The significance of background-size

In background-size: cover;, cover is a keyword that adjusts the background image. It maintains the image's aspect ratio while ensuring that the image completely fills the background area.

Unwanted repetition

The directive background-repeat: no-repeat; is essential. Without it, the background image will tile, meaning it will repeat across the container. This can lead to unwanted gaps or overlaps.

Handling scrolling

The background-attachment: fixed; directive ensures that the background image stays stationary even as page content scrolls over it, maintaining the full-screen image effect.

Utilizing viewport-relative units

There is also an alternative solution using viewport units such as vh and vw:

body {
  /* And now let the image take a good scroll */
  background: url('your-image.jpg') no-repeat center center scroll;
  /* Meet the viewport's dynamic duo */
  background-size: 100vw 100vh; 
}


In 100vw and 100vh, we're telling the image to stretch to 100% of the viewport width and viewport height, respectively.

Practical implementations and considerations

Keeping the image intact

An image's aspect ratio is the ratio between its width and its height. When using background-size: cover;, the image could be clipped if its aspect ratio isn't matching the container. To avoid this, choose the images wisely, keeping in mind different screen ratios.

Thinking about performance

Large, scaling images could potentially be heavy and affect the page load time. Always prioritize optimization and consider using media queries to serve smaller images on smaller screen sizes.

Positioning the image

Sometimes, aligning the image at the center top gives a better appearance. This is especially true with landscape images where the interesting elements like clouds or mountain peaks are located at the top:

body {
  /* The secret meeting place - 'top center' */
  background-position: center top; 
}


Testing cross-browser compatibility

While most browsers support these properties, it's a good practice to test your website's background image on different platforms to ensure a consistent user experience.