About ie background image display 100% (background image auto scaling adaptive)

There is a PNG transparent background image in the header of the project. The source image is much larger than the header. It can be tiled in chrome and FF to fill the entire header area,

Multiple images are not displayed, but the size of the entire PNG image is displayed in IE, resulting in large deformation. Later, I found a post about ie background image 100% on the Internet,

Find the solution:

Filter: progid: dximagetransform.microsoft.alphaimageloader(src0000'1.jpg ', sizingmethod = 'Scale ');

Add the aboveCodePerfect solution!

 

Repost the original article:

As W3C is preparing, the background image does not support the scaling function. Therefore, there are some differences between IE and FF browsers. The FF method is simple. You only need to use background-size to control the automatic scaling of the browser with the container size. The example is as follows. piclup {Background: url(logo.png) No-Repeat; width: 100%; Height: 40%; Background-size: 100% 100% ;} under such CSS control, the background image in FF can be automatically changed with the size of the parent container to achieve the filling effect, but under IE, you will find that the above CSS control will be unsatisfactory, and it will not be because you have a background-size: 100% 100%; and automatic scaling will show how the image is originally displayed, if the container is smaller than the image, only a part of the image can be displayed. To achieve this, you need to use some special things: alphaimageloader compatibility: ie5.5 + Syntax: filter: progid: DXImageTransform. micro Soft. alphaimageloader (Enabled = benabled, sizingmethod = ssize, src = Surl) attribute: enabled: Optional. Boolean ). Set or retrieve whether the filter is activated. True | falsetrue: default value. Filter activation. False: the filter is disabled. Sizingmethod: Optional. String ). Sets or retrieves the display mode of the image of the object to which the filter applies within the boundary of the object container. Crop: Cut the image to fit the object size. Image: default value. Increase or decrease the size boundary of an object to fit the image size. Scale: scale the image to adapt to the size boundary of the object. SRC: required. String ). Specify the background image using an absolute or relative URL. If this parameter is ignored, the filter will not work. Feature: enabled: read/write. Boolean ). See enabled attributes. Sizingmethod: read/write. String ). See sizingmethod attributes. SRC: read/write. String ). See src attributes. Note: An image is displayed between the background and content of the object within the boundary of the object container. You can also cut and change the size of the image. If the file is loaded in PNG (Portable Network Graphics) format, the transparency between 0% and 100% is also provided. The transparency of images in PNG (Portable Network Graphics) format does not affect your choice of text. That is to say, you can choose to display the content after the completely transparent area of images in PNG (Portable Network Graphics) format. Example. Hello {width: 10%; Height: 50%; position: absolute; filter: progid: dximagetransform.microsoft.alphaimageloader(src%'1.jpg ', sizingmethod = 'Scale ');}}