How to Stretch a Background Image to Fit a Web Page

Images are an important part of attractive website designs. This includes the use of background images. These are the images and graphics that are used behind areas of a page as opposed to images that are presented as part of the content pages. These background images can add visual interest to a page and help you achieve the visual design that you may be looking for on a page.

If you begin working with background images, you will undoubtedly run into the scenario where you want an image to stretch to fit the page. This is especially true for responsive websites that are being delivered to a wide range of devices and screen sizes.

This desire to stretch a background image is a very common desire for web designers because not every image fits in the space of a website. Instead of setting a fixed size, stretching the image allows it to flex to fit the page no matter how wide or narrow the browser window is.

The best way to stretch an image to fit the background of a page is to use the CSS3 property, for background-size.  Here is an example that uses a background image for the body of a page and which sets the size to 100% so that it will always stretch to fit the screen.

body {
  background: url(bgimage.jpg) no-repeat;
  background-size: 100%;
}

According to caniuse.com, this property works in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, and on all the major mobile browsers. This covers you for all the modern browsers available today, which means you should use this property without fear that it will not work on someone's screen.  

It is very unlikely that you would need to support any browsers older than IE9, but let's assume that you’re concerned that IE8 doesn’t support this property. In that instance, you can fake a stretched background. And you can use the browser prefixes for Firefox 3.6 (-moz-background-size) and Opera 10.0 (-o-background-size).

The easiest way to fake a stretched background image is to stretch it across the entire page. Then you don’t end up with extra space or have to worry that your text fits in the stretched area. Here’s how to do it:

id="bg" />

1. First, make sure that all browsers have a 100% height, 0 margins, and 0 padding on the andHTML BODY elements. Place the following in the head of your HTML document:
2. Add the image you want to be the background as the first element of the web page, and give it the id of "bg":
3. Position the background image so that it is fixed at the top and left and is 100% wide and 100% in height. Add this to your style sheet:
   1. img#bg {
   2. position: fixed;
   3. top: 0;
   4. left: 0;
   5. width: 100%;
   6. height: 100%;
   7. }
4. Add all your content to the page inside of a DIV element with an id of "content". Add the DIV below the image:All your content here - including headers, paragraphs, etc.
   1. Note: it’s interesting to look at your page now. The image should display stretched out, but your content is completely missing. Why? Because the background image is 100% in height, and the content division is after the image in the flow of the document — most browsers won’t display it.
5. Position your content so that it is relative and has a z-index of 1. This will bring it above the background image in standards-compliant browsers. Add this to your style sheet:
   1. #content {
   2. position: relative;
   3. z-index: 1;
   4. }

OK - this is admittedly WAY overkill.  Very few sites need to support IE 7 or 8 anymore, much less IE6!  As such, this approach is antiquated and likely unnecessary for you.  I leave it here more as a model of curiosity as to how much more difficult things were before all our browsers played so nicely together!

You can use a similar technique to fake a stretched background image across a DIV or another element on your web page. This is a bit trickier as you have to either use absolute positioning or have strange spacing issues for other parts of your page.

1. Place the image on the page that I want to use as the background.
2. In the style sheet, set a width and height for the image. Note, you can use percentages for width or height, but I find it easier to adjust with length values for the height.
   1. img#bg {
   2. width: 20em;
   3. height: 30em;
   4. }
3. Place your content in a div with the id "content" as we did above:All your content here
4. Style the content div to be the same width and height as the background image:
   1. div#content {
   2. width: 20em;
   3. height: 30em;
   4. }
5. Then position the content up to the same height as the image. So if your image is 30em you would have a style of top: -30em; Don’t forget to put a z-index of 1 on the content.
   1. #content {
   2. position: relative;
   3. top: -30em;
   4. z-index: 1;
   5. width: 20em;
   6. height: 30em;
   7. }
6. Then add in a z-index of -1 for IE 6 users, as you did above:

Again, with background-size enjoying the broad browser support it now does, this approach is also very likely unnecessary and presented as a product of a bygone era.  If you did want to use this approach, just be sure to test this in as many browsers as you can. And if your content changes size, you’ll need to change the size of your container and background image, otherwise, you’ll end up with strange results.