Problem
Many people on the Dreamweaver forum often ask how to have a background image scale to fill the browser window.
Solution
This solution is partly taken from an article on "A list Apart" and uses the css3 background size property. This means that it it would not normally be usable for IE versions before IE9, (currently in preview) however it does work in all other popular browsers, and can work in IE6/7/8 using the IEFilter 'AlphaImageLoader'.
Detailed explanation
For a complete explanation I would recommend reading the original article at - http://www.alistapart.com/articles/supersize-that-background-please/.
Briefly the current, (css 2.1) background image propery may look like the following -
background: #000 url(myBackground.jpg) center center fixed no-repeat;
However using the css3 background-size property it is possible to have the image resize and retain its aspect ration, by adding the following -
-moz-background-size: cover;
background-size: cover;
The 'cover' keyword indicates that the image should be resized and maintain any intristic aspect ratio.
The second option is 'contain', which always fits the entire image inside the viewport, but inserts opaque borders if required.
In order for it also to work in all current versions of IE one would have to include the IEFilter -
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Using the sizingMethod= 'scale' means that even IE will scale the background image to the size of the browser window.
The refered to article also explains how to use media-queries to specify a max and/or a min height and width value. I would thouroughly recommend reading the original article for a fuller explanation and to view the demos.
A working example of this method can be see here along with a more detailed use of the css3 property background-size - http://www.pziecina.com/design/turorial_demos/resize_background.php, please note that I would recommend the usage of a modern browser such as Firefox, Safari or Chrome as the examples use the css3 resize property.
IMPORTANT: Do not apply any IEFilters to the html tag, as this will cause unexpected problems.
Clipping of image: Images may be 'clipped' by both the css3 and IEFilter, if the algorithm used by the browser cannot maintain the aspect ration. This will cause black bands at the sides of the image and/or only a section of the image to only be displayed.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
