Let IE7 IE8 support CSS3 background-size Properties

Brief introduction

CSS3 New Background-size is a useful property that defines the size of the background image, and with this property, you can specify the size of the background image arbitrarily. The most commonly used value should be cover, which allows the background image to be scaled to fill the entire container, even if the image area is smaller than the container area.

Since Background-size is a new attribute of CSS3, IE low version naturally does not support, but the foreigner wrote an HTC file, called Background-size Polyfill, use this file can let IE7, IE8 support Backgroun The D-size property. The principle is to create an IMG element to insert into the container and recalculate the width, height, left, top equivalents, simulating the background-size effect.

How to use

Write directly in the style, such as:

body {height:100%;    margin:0;    Background:url (images/126.jpg) center no-repeat;    Background-size:cover;    -ms-behavior:url (BACKGROUNDSIZE.MIN.HTC); Behavior:url (BACKGROUNDSIZE.MIN.HTC);}

Limitations

Background-size Polyfill Although can simulate background-size properties, but does not fully simulate, after all, background mode and IMG mode is still different, the main support situation is as follows:

Support

• The correct position and size of the background image
• Update the browser when zooming
• Update images (replacement, etc.) in a timely manner

Not supported

• Multiple backgrounds (multiple backgrounds)
• Background-position of 4 values
• Repeat background
• Background-[clip/origin/attachment/scroll for non-default values]

As the background-size Polyfill needs to be complicated, the picture "flash" may appear. and. htc files are not yet cross-domain, using CDN needs attention.

Although Background-size Polyfill has certain limitations, it is better than no, in some cases it is a good choice.

Let IE7 IE8 support CSS3 background-size Properties