Background related properties in CSS

Background-origin:Specifies which part of the Background-position property is positioned relative to the container.

Padding-box background image is positioned relative to the inner margin box; (default)

The Border-box background image is positioned relative to the bounding box;

The Content-box background image is positioned relative to the content box.

background-position: Sets the starting position of the background image in the container display.

Default value: 0 0 (displayed from the top left of the background map);

Value: int px int px; The top left point of the background map is in the container's coordinate position and can be negative. A negative value indicates that the upper-left point of the background is not inside the container, and the excess part is hidden.

If only one value is set, the other value will be "centered" (50%/center)

　　If a percentage is used, the coordinates are calculated as follows:

X: (Width of the container-the width of the background image) *x percent, the excess portion is hidden; y: (Height of the container-height of the background image) *y percent, out of the part hidden.

So left/top is equivalent to 0%,right/bottom equivalent to 100% (the right/bottom edge of the background map is coincident with the container), and center is equivalent to 50% (the background image is in the middle of the container).

background-size: Set the size of the background map (IE8 does not support this property)

Percent/length: If it is a percentage, the size of the background map is the product of the container multiplied by the percentage. Set only one, and the second is auto (to maintain the same length-to-width ratio as the original background map).

If both are set to 100%, the background map fills the container, but the length-to-width ratio changes.

Contain: The container contains the entire background map as a fixed proportion of the background graph. The size of the background map is enlarged by a fixed scale in the background map, and any one of its edges reaches the boundaries of the container, often leading to the other side blank (with No-repeat).

Cover: The background image is enlarged by a fixed aspect ratio to fill the entire container (the side that is shorter on the background map also reaches the container boundary). A portion of the background map is removed from the container.

IE8 compatible:

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' absolute path ', sizingmethod= ' scale/crop ');

Crop: The size of the background image is unchanged, and the image is clipped to fit the area size.

Image: Default value. Increase or decrease the size boundaries of the area to fit the size of the background map, which is equivalent to the overflow:visible effect.

Scale: Scales the background map to fit the area's dimension boundaries.

① can not specify any size background percent ② only suitable for single picture can not use picture Sprite and other puzzles ③ to reference absolute path picture ④ compatible ie7,8