How to Enable Background Size in Internet Explorer [Quicktip]

The new features that come with CSS3 aren’t applicable in Internet Explorer 8-6, yet we can accept this limitation as the effects degrade nicely. For example, browsers without support for CSS3 Box Shadow won’t display the shadow, but this is acceptable as long as the content remains readable.

However, one feature you can’t ignore is CSS3 Background Size. We can control the size of background images added through CSS using the new background-size property. We can specify the width and height in precise units and also make the background follow the container size using cover and contain values.

The cover value fills the entire area of its container while maintaining proportional width and height. The contain value adjusts the background to fit within the container’s width. This sometimes results in empty space when the container height exceeds the image height.

Recommended Reading: How To Enable Box Sizing In Internet Explorer 7 [Quicktip]

1. Using CSS3 Background Size

Note that the new background-size property cannot be included within the background shorthand property. They must be declared separately, like so.

.container {
    background: url('img/image.jpg');
    background-size: cover;
}

In the code snippet above, we’ve attached an image with a width of approximately 3000px. The background-size property we’ve added will prevent the background image from overflowing the content. As mentioned earlier, the cover value will proportionally fill the entire container.

This is what you’ll see in the browser.

2. CSS3 Background Size in Internet Explorer

Unfortunately, this feature doesn’t gracefully fall back in Internet Explorer 8 and below. If you use a very large image, it may overflow the container. Conversely, if you use a very small image, you’ll end up with empty space within the container. Using the same example above, you’ll get the following result in Internet Explorer 8-6.

Therefore, we need a polyfill that can replicate CSS3 Background Size functionality in Internet Explorer.

3. CSS3 Background Size Polyfill

This polyfill, developed by Louis-Rémi, replicates the behavior of the background-size property with cover and contain values. It comes in the form of an HTC file named backgroundsize.htc and an .htaccess file, which is required when serving pages from an Apache server to send the correct HTC mime-type.

To use it, include the HTC file through Internet Explorer’s behavior property, as follows.

.background-size {
    width: 500px;
    height: 320px;
    background-image: url('img/image.jpg');
    background-size: cover;
    -ms-behavior: url('http://example.com/js/backgroundsize.htc');
}

If you’re using an Apache server, place the .htaccess file in the server’s root folder, or simply add this line to the existing .htaccess file if one exists:

AddType text/x-component .htc

That’s all there is to it. When you view the page in Internet Explorer and have set the background-size to cover as shown above, you’ll see that the background image is now properly resized and fits proportionally within the container. Check out the following demo in Internet Explorer 8-6 to see it in action.