Solve the problem that some versions of IE do not support the background-size attribute, iebackground-size

Solve the problem that some versions of IE do not support the background-size attribute, iebackground-size

Background-size is a new property of CSS3. Many browsers now support CSS3. However, some versions of the IE browser are not supported, such as IE8 and IE9. Some CSS 3 attributes are supported, but some are not supported. Here we will take a look at the background-size of CSS3.

Background-size attribute

1. Definition:
Background-size is used to adjust the size of the background image. It is displayed in pixels or percentages. When specified as a percentage, the size is determined by the width, height, and location of the background-origin, you can also use cover and contain to scale images.

2. Syntax:
Background-size: contain | cover | 100px 100px | 50% 100%;

3. parameters:
Background-size: contain; // reduce the image size to adapt to the element (keep the aspect ratio of the pixel );
Background-size: cover; // extend the image to fill the element (keep the aspect ratio of the pixel );
Background-size: 100px 100px; // adjust the image size to the specified size;
Background-size: 50% 100%; // adjust the size of the image to the specified size. The percentage is relative to the size of the contained element.

4. browser compatibility:
Internet Explorer and Internet Explorer are not supported;
Add the private property-moz-background-size in Firefox;
Added private attributes-webkit-background-size support for Safari and Chrome;
Opera does not support the background-size attribute, nor does it support adding its private property-o-background-size.

5. Example:

div{   background:#00ff00 url(img.jpg) no-repeat;   background-size:60% 80%;   -moz-background-size:60% 80%;   -webkit-background-size:60% 80%;   -o-background-size:60% 80%;}

When IE does not support this attribute, you can use a filter to achieve this effect.

The Code is as follows:

<strong>background-image: url('file:///F:/test/images/flashbg.jpg');background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',  sizingMethod='scale');</strong>

In this way, IE can also achieve the effect of background-size: 100% 100%. Note that the two paths must be the same and are absolute paths.