html - Alternative for background-size:cover in IE7+

Question

I have a background image on the body of my web page. I have used background-size:cover so that the image stretches across the body whilst maintaining the aspect ratio of the image. I would like this to be the same for IE7 + IE8.

I have looked around and seen the following code:

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

But this doesn't preserve the aspect ratio, which is really bad for the website we are aiming at.

Is there any way to do this? Without hitting up jQuery?

Answer 1

What's the reason of not using jQuery? You could load it in conditional comments for IE<8 only, so that for every other modern browser jQuery is not loaded.

Also consider that IE7 has a very low market share (2,52%, April 2012) so it can be acceptable to load ~ 25kb extra for that specific browser if this feature is so important for your site/application.

So, I've found this plugin for jQuery: https://github.com/louisremi/jquery.backgroundSize.js

A jQuery cssHook adding support for "cover" and "contain" to IE6-7-8, in 1.5K

See Github project page for more info.