Home > Developer > Web Develop
Background-size is a new attribute for CSS3, but IE8 below is still not supported
Background-size:contain; Shrink the image to fit the dimensions of the element (keeping the pixel's aspect ratio);
Background-size:cover; Expands the image to fill the element (keeping the pixel aspect ratio);
background-size:100px 100px; Adjusts the picture to the specified size;
background-size:50% 100%; Adjusts the picture to a specified size, in percent relative to the size of the containing element.
Browser compatible:
IE and roaming do not support;
Firefox Add private properties-moz-background-size support;
Safari and Chrome Add private properties-webkit-background-size support;
Opera does not support the Background-size property, and adding its private properties-o-background-size is not supported.
First, let IE7 IE8 support CSS3 background-size PropertiesSince 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:<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Let IE7 IE8 support CSS3 background-size Properties</title> <style>HTML{Height:100%; }Body{Height:100%;margin:0;background:URL (http://cdn.dowebok.com/139/images/bg.jpg) center No-repeat;background-size:cover;-ms-behavior:URL (css/backgroundsize.min.htc);Behavior:URL (css/backgroundsize.min.htc); } </style></Head><Body></Body></HTML>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:
SupportAs 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.
Second, let IE8 support CSS3 Background-size PropertyUse filters to achieve such an effect.
width:100%; min-height:100%; Background:url (".. /images/map.png ") no-repeat; background-size:100% 100%; Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ( src= ' file:///E:/idea-project/html/nongkeyuan/ Assets/images/map.png ', Note: If the path is absolute
CSS3 Background-size Property compatible
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
