background related properties in css

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

The padding-box background image is positioned relative to the padding box; (Default)

The border-box background image is positioned relative to the border box;

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

background-position:Set the starting position of the background image displayed in the container.

Default value: 0 0 (displayed from the upper left point of the background image);

Value: Int px Int px; the upper left fixed point of the background image is at the coordinate position of the container, which can be negative value. A negative value means that the upper left point of the background image is not within the container, and the beyond 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 according to the following formula:

　x: (width of the container - width of the background image) * x percentage, the excess part is hidden; y: (height of the container - height of the background image) * y percentage, the excess part is hidden.

So left/top is equivalent to 0%, right/bottom is equivalent to 100% (the right/bottom edge of the background image coincides 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 image (IE8 does not support this attribute)

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

If both are set to 100%, the background image will fill the container, but the aspect ratio will change.

contain: The container contains the entire background image according to a fixed proportion of the background image. The size of the background image is enlarged by a fixed ratio based on the background image. Until any side reaches the boundary of the container, the other side will often be blank (when there is no-repeat).

Cover: The background image is enlarged according to a fixed aspect ratio until it fills the entire container (the shorter side of the background image also reaches the container boundary). Part of the background image will be cut off because it exceeds the container.

IE8 compatible:

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

　crop: The size of the background image remains unchanged, and the image is cut to fit the area size.

Image: Default value. Increase or reduce the size boundary of the area to adapt to the size of the background image, which is equivalent to the effect of overflow: visible.

Scale: Scale the background image to fit the size boundaries of the area.

　①Cannot specify any size background percentage②Only suitable for a single picture and cannot use picture sprites and other puzzles③Absolute path pictures must be referenced④Compatible with ie7, 8

The above is the detailed content of background related properties in css. For more information, please follow other related articles on the PHP Chinese website!