CSS3------background-size (background image size properties)

background-sizeYou can set the size of the background picture, and the value includes length and percent percentage. background-originIt also sets the extent of its image coverage based on the background Origin location. So let's take a look at this background-size property.

Background-size syntax

The grammatical rules of background-size are as follows:

Property name:	Background-size
Property value:	<bg-size>* where bg-size = [<length> | <percentage> | Auto]{1,2} | Cover | Contain
Initial value:	Auto Auto
Apply to:	All elements
Inheritance:	No
Percentage:	See note below
Calculated value:	According to the specified

Syntax: Background-size:length|percentage|cover|contain;

value	Description
Length	Sets the height and width of the background picture. The first value sets the width, and the second value sets the height. If only one value is given, the second one is set to "Atuo (auto)"
Percentage	Calculates the percentage relative to the background location area. The first value sets the width, and the second value sets the height. If only one value is given, the second one is set to Auto (auto)
Cover	The image's aspect ratio is maintained and the image is scaled to the minimum size that will completely cover the background location area.
Contain	The aspect ratio of the image is maintained and the image is scaled to the maximum size that will fit the background location area.

Grammatical explanations

1, Length,percentage, adjust the background image size according to the given length value or percentage. Auto is the default value, and these three values can be repeated at least once and repeat two times at maximum. The following explanations are available for these values:
The first value sets the width of the picture, the second value is the height of the picture, but no matter what value it is, it cannot be negative.
If only one value is given, then the second automatic is ' auto ';
If the value is specified as a percentage percentage, the background map size is adjusted according to the relative background area, which is determined by the background-origin. This has already been mentioned in the above discussion about the origin of the picture. It is necessary to mention that if background-attachment:fixed , then the relative region of the background is the initial containing block is the window.

2, contain, adjust the background picture proportionally, make its picture aspect ratio adapts to the aspect ratio of the whole element's background area, so if the specified picture size is too large, and the whole width height of the background area cannot contain the background picture, then some areas of its background may be blank.

Application Scenarios

background-sizethe current scene is based on the background of the WebApp, the general situation is, for example, the most common logo as an element of the background, but the logo is very complex, if we follow the design map to slice, there are two possibilities:
1, according to Csser resolution to slice, such as height for 50px,logo is directly scaled to 50px that will be very awkward, and estimated that the picture is too beautiful, you dare not look;
2, according to the resolution of the shooting wet design to cut, it is possible to design the logo size will be very large, but we csser write when the height of only 50px, the logo will be displayed incomplete;

At this time background-size play an important role, we can through the background image size of the adaptive scaling, without affecting the aesthetics and can all show the effect we need.

CSS3------background-size (background image size properties)