Daimler Dart

Wickham's HTML & CSS tutorial

Sitemap | Home | prev

Background image full width and flexible

It's not a true background-image; it's just a normal image inside a div with a position tied to both sides and with width: 100%. A background-image would not be able to stretch with different window resolutions except that CSS3 (unsupported by IE6 to IE8) does support background-size in %.

If you make your window smaller and then drag it wider or narrower you will see the image expand or contract, maintaining contact with both sides while the image height changes in proportion. The content is in a fixed width div and will create a horizontal scrollbar while the image always fits the width. The content could be flexible in width and then both the image and content would fit the width.

The image is position: fixed for all browsers except IE6 which does not operate position: fixed, so position: absolute has been used for IE6 in a conditional comment which causes the image to scroll in IE6. This is the extra style used for the image in the background:-

<style type="text/css">
.background { width: 100%; position: fixed; left: 0; right: 0; top: 0; z-index: -1; }
</style>

and this is the conditional comment for IE6 (lt ie 7 means less than IE7):-

<!--[if lt ie 7]>
<style type="text/css">
.background { position: absolute; }
</style>
<![endif]-->

This is the html markup relating to the image:-

<div class="noborder">
<img class="background" src="images/daimlerdartfrontfaint.jpg" alt="Daimler Dart">
</div>

I had to put some minor edits in the head section style tag to adjust the main stylesheet codes including making the background-color for headings, links and code font transparent instead of the original background-color for other pages, but the essential codes for the background are shown above.


More methods for a full-screen fluid image

There are several other methods but some are not processed by older browsers, in particular IE, whereas the example above displays properly in IE7 and above and other main browsers and IE6 will display full screen with position: absolute, although the image will scroll.

See CSS-Tricks


© Wickham 2008 updated 2011