Question: How Do you Stretch a Background Image in a Web Page?
I got the following question from Neo:
“I am trying since months but I can’t find a way to stretch background images in a web page.... What is the reason that it seems impossible to do? How to do it?”
This is a very common desire for web designers, because not every image fits in the space of a website. Plus stretching the image allows it to flex to fit the page no matter how wide or narrow the browser window is.
Answer:
The best way to stretch an image to fit the background of a page is to use the CSS3 property,
background-size: body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
} According to caniuse.com it works in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, and on all the major mobile browsers. You can see how it works on this page: example of the
background-size property.Faking a Stretched Background in Older Browsers
If you’re concerned that IE8 doesn’t support it, 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:
- First, make sure that all browsers have a 100% height, 0 margin, and 0 padding on the
HTMLandBODYelements. Place the following in the head of your HTML document:<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
- Add the image you want to be the background as the first element of the web page, and give it the
idof "bg":<body>
<img src="bgimage.jpg" alt="background image" id="bg" />
</body> - 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:
img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
} - Add all your content to the page inside of a
DIVelement with anidof "content". Add theDIVbelow the image:
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.<div id="content">All your content here - including headers, paragraphs, etc.</div> - Position your content so that it is relative and has a
z-indexof 1. This will bring it above the background image in standards-compliant browsers. Add this to your style sheet:#content {
position: relative;
z-index: 1;
} - But you’re not done. Internet Explorer 6 isn’t standards compliant and still has some problems. There are many ways to hide the CSS from every browser but IE6, but the easiest (and least likely to cause other problems) is to use conditional comments. Put the following after your style sheet in the head of your document:
<!--[if IE 6]>
<![endif]--> - Inside the highlighted comment, add another style sheet with some styles to get IE 6 to play nice:
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]--> - Be sure to test in IE 7 and IE 8 as well. You may need to adjust the comments to support them as well. However, it worked when I tested it.
See an example of a faked stretched background
Faking a Stretched Background Image Over a Smaller Space
You can use a similar technique to fake a stretched background image across a
DIV or other 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.- Place the image on the page that I want to use as the background.
<img src="bgimage.jpg" alt="background" id="bg" /> - 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.
img#bg {
width: 20em;
height: 30em;
} - Place your content in a div with the
id"content" as we did above:<div id="content">All your content here</div> - Style the content div to be the same width and height as the background image:
div#content {
width: 20em;
height: 30em;
} - Then position the content up 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.
#content {
position: relative;
top: -30em;
z-index: 1;
width: 20em;
height: 30em;
} - Then add in a z-index of -1 for IE 6 users, as you did above:
<!--[if IE 6]>
<style type="text/css">
img#bg { z-index: -1; }
</style>
<![endif]-->
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.
SHARE
