P. Ziecina

Web Design and Development

To - Design homepage - or - Close this window

Using the CSS3 background-size property, including how-to create auto resizing background images that maintain the aspect ratio, (with IEFilter fallback for IE8 and below).

Auto resizing background images.

Many people are asking how to have a background image scale to fill the browser window and have it maintain the aspect ratio.

This solution was inspired by an article on "A list Apart" and uses the css3 background size property and the IEFilter 'AlphaImageLoader'. Without the 'AlphaImageLoader' the css3 solution would not normally be usable for IE versions before IE9, however using the IEFilter 'AlphaImageLoader' it can work in IE8 and below, but the resulting 'aspect ratio' may not be maintained as good as the css3.

Important - As IE9 includes the css3 background-size property, one should enclose any IE Filters in IE Conditional Comments when possible. Also IEFilters can be processor intensive so limit the number of different filters to 2 or 3, (this is the total number of filters used) otherwise on slower/older systems the slow speed of rendering IEFilters may become noticeable

The css3

Briefly the current, (css 2.1) background image property may look like the following -

background: #000 url(linkToImage.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 intrinsic aspect ratio.
The second option is 'contain', which always fits the entire image inside the view port, but inserts opaque borders if required.

The IEFilter css

In order for it also to work in all current versions of IE one would have to include the IEFilter -

For pre IE8 use -

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale');

For IE8 use -

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale')";

Using the sizingMethod= 'scale' means that even IE will scale the background image to the size of the browser window.

The full css

The css for the background in the body of these page, would then be -

body {
background: #F4EEFE url(linkToImage.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}
and for IE8 and below use
<!--[if lte IE 8]>
<style type="text/css">
body {
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg', sizingMethod='scale')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg', sizingMethod='scale');
}
</style>
<![endif]-->
And don't forget your page content should be contained in a container div, or html5 section

Notice that the background position is 'center center fixed no-repeat', do not use anything else, otherwise the image will not size correctly.

Important: Do not forget to give the container for any text a position in order to 're-enable' clearType, otherwise the text will appear to be 'fuzzy' in IE8 or below.
For this page the css for this reads -

#container {
	position: relative;
}

Important: Do not apply any IEFilters to the html tag, as this will cause unexpected problems. Also ensure the image is os sufficient size and quality for use, if it cannot be 'resized' correctly the IEFilter and the css background-size property may NOT be applied.

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 be displayed.

Use on div's within the body.

The method above should not be used on other elements within the body tags, as the background-size property 'cover' resizes the image to the size of the browser window.

If you have the latest versions of Safari, Chrome or Firefox, (or any browser that supports the resizing of elements through the css3 property 'resize' some interesting effects can be archived.

Resize the box below if you have a browsers that support this feature by 'dragging' the lower right corner to resize, and also scroll the page in the browser.

The IEFilter rule is applied to all except the 'original' 63px x 100px image below, (as this is done using the css2.1 background-image code) and behaves the same for all background images.

This 'box' has it's own background image, and is not transparent!

The images below are all height = 63px width = 100px, to demonstrate how the background-size and IEfilter work, (and show the differences) view them in a browser that supports the css background-size property, then in a pre IE9 browser, this should then illustrate the essential differences, (the 2nd image can be resized on those browsers supporting this css3 feature).

Original size
Just some text

The same background image as the small thumbnail image, (image of lillys) and the code used for the main, (body) background-image and background-size has been used for the above box, however as one can see the image is NOT simply 'placed' into the box as one would expect, (using the IEFilter it is) but instead is the size of the browser window itself. See the next section for how to do this.

Other values for the background-size property.

Using the background-size property it is also possible to 'scale' the background image. Using the above images with height = 63px, width = 100px -

Inserting a 'scalable' background image.

The image below is resized to 50% of its width, and 70% of its height -

-moz-background-size: 50% 70%;
-moz-background-origin: border;
background-size: 50% 70%;
background-origin: border;
Just some text

The image below is 100% of its width and height, but if you resize the box you will see that it does scale-up as one would expect, but 'clips' the image if the aspect ratio cannot be preserved, -

-moz-background-size: 100%;
background-size: 100%;
Just some text

The image below is 100% of the boxes width and height, but the box is set to a fixed height and width and cannot be resized, and is more suited for the 'traditional' use of background-image, but with the advantage that the image does scale to 'fit the box', and also uses -

-moz-background-size: 100%;
background-size: 100%;
Just some text

Conclusions

The background-size property is supported by all the modern browsers, and can be 'emulated' in IE8 and below using the IEFilter. Unfortunately the css3 resize property is not supported by any of the current versions of IE or Opera but can be 'simulated' using javascript or the jQuery UI, (re sizeable).

The use of scalable background image on page elements, when used with the background-size: 100%; will make using 'semi-fluid' layouts much simpler as any images used will also be resized when the browser window is resized, giving a much more consistent and more controllable layout.

The possibility of css driven 'light boxes' when used with the css transitions feature are now a real possibility. For the more modern browsers and IE9, hover over the image below, (a simple hover image enlargement is implemented for IE7/8).

Just some text
To - Design homepage - or - Close this window

Other Items

Tutorial Demos

These tutorial / demos are provided to help you understand some of the newer web design and development techniques.

Important: These tutorials / demos will open in a new window / tab.

Demo of using pure css text rollovers
Demos of advanced css including css3
Using multiple background images in CSS3
Background Gradients
CSS3 Table layout
CSS3 Transforms
CSS Background Opacity
Css3 background-size

The following requires IE to view the effects:

Demo of IE Filters

Contact me / Feedback

Contact me / feedback form




red * = required items.

Dreamweaver etc.

This section includes specific demos / tutorials for the listed products:

Accessibility / Design Policy

I am committed to making web sites that are useable by everyone - including those with disabilities. Some of the ways in which this is accomplish are:

Resizable Text

The ability to make text larger, (or in some cases smaller) is important, so I try to ensure that doing so will have as little effect on the layout as possible. To increase text size from your keyboard, hold down the Ctrl or Apple Key and hit the plus sign (Ctrl++). To make text smaller, press Ctrl+minus sign (Ctrl+-). For normal text size, press Ctrl+zero (Ctrl+0).

Display Size

This site has been designed to perform well on all screen sizes and resolutions, and many of the sites sub-sections are designed to be semi-fluid and resize along with any increase/decrease of the browsers viewport.

Supported Web Browsers

This web site has been designed, coded and tested in all modern browsers, and most internet enabled mobile devices. and I have included a mobile specific 'site' of the design sub-section for those who wish to view the articles contained in that section at - to mobile friendly 'site'.

Designed and coded to web standards

This site uses CSS and (x)html5, sites that use tables and outdated coding methods can pose problems for many users and especially those using assistive devices.

Using IE6, or outdated browsers:

If you are using IE6 or a similar browser that is now long past its 'use by date', then you are not experiencing the full potential of the web. Like many others I do not design with this browser in mind, but for the other 98% of users who now expect a richer and more modern design.
If you are using an outdated browser, please consider upgrading to a more modern one.

Copyright etc - This can be found in the portfolio section of the site.

As I work from home, no address or telephone contact details are provided via this site.
Should you wish to contact me, please use the 'Contact me / Feedback' form above, or the general contact form - Contact me