CSS Control background Image 100% Adaptive fill layout

Original address: http://blog.csdn.net/wd4java/article/details/50537562

. personal_head {width:100%; height:35%; Background:url (".. /.. /.. /static/img/headbg.jpg ") No-repeat; background-size:100% 100%; Position:absolute;
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' bg-login.png ', sizingmethod= ' scale '); }

When doing a responsive layout, if there is a background map, we certainly hope that he can display the full screen 100%, so that the page is very large, but there is a problem, the size of the picture is suitable, now the browser resolution is uneven, for Firefox and other advanced browsers, Using Background-size is set to 100%, and IE requires different settings.

In Firefox, you can control the size of the container and automatically scale it with background-size.

piclup{    Background:url (logo.png) no-repeat;    width:100%;height:40%;    background-size:100%100%;}

Under such a CSS control, you can achieve the background image in Firefox with the parent container size and automatically change to achieve the fill effect, but under IE, you will find the above CSS control is not ideal, it does not because you have background-size:100% 100%; and auto-scaling, how to display the original picture, if the container is smaller than the picture, you can only display part of the picture, then to achieve this effect, you need to use IE-specific filters.

AlphaImageLoader compatibility

ie5.5+

Grammar

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=benabled, Sizingmethod=ssize, Src=surl)

Property

• Enabled: Options available. A Boolean value (Boolean). Sets or retrieves whether the filter is active. true | False
• True: the default value. Filter activated.
• False: The filter is forbidden.
• Sizingmethod: Options available. String. Sets or retrieves how the picture of the object that the filter acts on is displayed within the bounds of the object container.
• Crop: Cuts the picture to fit the object's size.
• Image: Default value. Increase or decrease the size boundaries of an object to fit the dimensions of the picture.
• Scale: Scales the picture to fit the object's dimension boundaries.
• SRC: Required option. String. Specifies the background image using an absolute or relative URL address. If this parameter is omitted, the filter will not function.

Characteristics

• Enabled: Readable and writable. A Boolean value (Boolean). See the Enabled property.
• Sizingmethod: Readable and writable. String. See Sizingmethod properties.
• SRC: readable and writable. String. See SRC attribute.

Description

Within the bounds of the object container, a picture is displayed between the object's background and content. It also provides an operation to cut and resize the image. If the PNG (Portable Network Graphics) format is loaded, the transparency of 0%-100% is also provided.

The transparency of a picture in the PNG (Portable Network Graphics) format does not prevent you from selecting text. That is, you can choose to display the content behind the fully transparent area of the picture in the PNG (Portable Network Graphics) format.

hello{    width:10%;    height:50%;    Position:absolute;    Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' 1.jpg ', sizingmethod= ' scale ');}

With the introduction of the above two methods, we can be perfectly compatible with all browsers, using CSS to make the background figure 100% filled.

CSS Control background Image 100% Adaptive fill layout