How to make background-size work in old IE

All of us, sometimes, want to make a beautiful background image in a particular area of ​​the site.
More often, in this case, we want the background not to be distorted when the browser window is resized.
Sometimes this can be done with the help of img , in which one of the dimensions (width or height) is specified in % , sometimes you need a more flexible solution (if only because the background is the background, and the content is not placed in the picture without special techniques).

The use of the CSS background-image property, which sets the background image for an element, comes to mind. However, without additional tags, the image is tied to the upper left corner and cropped if the size of the element is smaller than the image, and white areas appear on the right and below, if the size of the element is larger.

The next thing that comes to mind is the search for additional CSS properties that will help customize the background. These are background-repeat , background-position and background-size .
This is where the problems begin, more precisely, with background-size , since this property is not supported by IE8 and even IE9 in quirks mode .

There are two solutions to this problem:

• Correct (use crutches).
• Fast (leave XP users, with their latest available IE8, without a beautiful background).

')
If you chose the right solution, here's what is on the Internet:

1. Native crutches for IE

Sometimes it is acceptable to stretch and compress the background image, since the user will not notice the difference (a single-pixel strip gradient can stretch across the entire width of the page and look great)
To do this, add the following properties as CSS properties:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif', sizingMethod='scale')"; 

images / logo.gif is the path to the background image.
These properties are understood only by IE and do not harm normal browsers.

2. jquery.backgroundSize.js

This plugin is marked by the author as obsolete, however, it works.
Benefits:

• Works for IE6, IE7, IE8.
• Disabled if the browser supports the background-size property.

Disadvantages:

• It replaces the background either for all browsers (even supporting background-size ), or does not work in IE9 in quirks mode (and it also does not support background-size ). Connected to the connection method via conditional comment.
• It does not support updating the image when the element is resized (without changing the window size).
• Supports only cover and contain properties.
• You need to set the background-size property using jQuery.
• Requires jQuery to work.

To use this solution, you need to connect it to the page like this:

 <!-- The flag should be inserted before loading the script --> <script>$.debugBGS = true;</script> <!--[if lt IE 9]> <script src="/path/to/jquery.backgroundSize.min.js"></script> <![endif]--> 

And set the background-size property for the elements like this:

 $(elem).css( "background-size", "cover" ); 

3. background-size-polyfill

It is the development of solution number 2.
Benefits:

• Work does not need external libraries.
• Setting the background-size property is almost the usual way (you need to add -ms-behavior: url (/backs-size.min.htc); ).
• Supports other background-size values ​​besides cover and contain .

Disadvantages:

• It positions itself as a solution for IE8, however, somehow, it works with IE7 and does not work in IE6.
• Does not work in IE8 in quirks mode .
• It does not support updating the image when the element is resized (without changing the window size).
• There is no check for the browser version, so it inserts a div with img in all elements with background-size and -ms-behavior , even if the browser supports this property.

To use this solution, you must place the .htaccess file, taken from the site of this solution, in the root of the site, and backgroundsize.min.htc wherever you want.
When setting CSS properties for an element, along with background-size you need to set the -ms-behavior property : url (path_to_your_chook_job / backgroundsize.min.htc);

4. background-size-emu

The decision is based on the ideas of decision number 3.
Benefits:

• Work does not need external libraries.
• Setting the background-size property happens as usual (no need to add anything anywhere).
• Supports other background-size values ​​besides cover and contain .
• Works in IE6, IE7, IE8, IE9 in quirks mode .
• Disabled if the browser supports the background-size property.
• It supports updating the image, when changing the size of the element, without changing the size of the browser window.

Disadvantages:

• Updates images with a half-second delay, in the case of their dynamic addition to the page and instantly with changes in size.
• It loads old IE a bit, because once every 500 milliseconds it scans all DOM elements on the page and determines what needs to be updated and what is not.
• Cannot replace the background for the TR element.

To use this solution, you just need to connect the script to the page.

Common problems

Solutions # 2, # 3 and # 4 are inserted into the element for which the background-size is set , an absolutely positioned div with img inside and change the size of the picture depending on the size of the element.

Since this is still a crutch, all solutions are not supported:

• Several background pictures.
• 4-digit background-position syntax.
• background-repeat (there is no repetition).
• Non-standard values ​​for background- [clip / origin / attachment / scroll] (if you change the values, it will not affect anything).
• Background substitution for elements in which there cannot be nested elements.

Lastly

All of the above libraries are available on GitHub.