How to Enable Background Size in Internet Explorer [Quicktip]

The new features that come with CSS3 won't be applicable in Internet Explorer 8-6, and yet we can ignore this disadvantage as the effect will degrade nicely. For example, browsers without the support for CSS3 Box Shadow won't see the shadow, but this is fine so long as the content remains readable. However, one of the few things that you can't ignore is when you apply CSS3 Background Size. We are able to control the size of background images added through CSS using the newbackground-size property. We can specify the width and the height in precise units and also let the background follow the container size using cover and contain values. The cover value fills the entire area of its container and the width and height are proportionally adjusted. The contain value, will push the background to fit in the width of the container. This will sometimes result in a void when the container height is longer than the image. Recommended Reading: How To Enable Box Sizing In Internet Explorer 7 [Quicktip]

1. Using CSS3 Background Size

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

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

In the code snippet shown above, we attached an image with a width of around 3000px. The background-size that we have also added therein will prevent the background image from overflowing the content. As we mentione [...]