1.background-repeat
Width and height can not just background and generally the same size container, (in the case of no-repeat) more often, so that some blank areas. For covered container, the background map will continue to fill in a repetitive manner container, when the size of the rest of the space is already enough of a picture, how to deal with the remaining space is the mission of this property
he has a value:
REPEAT - (default ), regardless of whether the picture is displayed full, tiled continue, the result is usually half display pictures (not enough space thing)
rEPEAT-the X-- horizontal tile
repeat-y - vertically tiled
no-repeat - do not repeat, only display a picture
round - pictures of telescopic "digest" blank out the rest of the region, ensure the integrity of each picture type of
space - the rest of the blank area are divided into intervals, separated from each picture to ensure the integrity of each picture type
As shown, the container size is 600 420, the size of a background image is 144 197 Put four transverse filled up, 5 does not fit. Vertical filled up two, three fit.
If set to round, the four lateral discharge, which four image enlarged just fills the transverse width of the container geometric, longitudinally true (may also be adapted to reduce the width)
, if set to Space, the lateral discharge 4, the remaining space They are divided into intervals, separated by the each picture
2.background-size
This property single background image size, the default is the original size. His values are the following:
specific numerical example 50px (Note that the aspect ratio, to avoid the image distortion)
percentage for example 50% (this ratio is fundamental container itself, rather than the original size)
Contain background image scaling to adapt the size of the container (aspect ratio not changed)
Cover background image scaling, to adapt the size of the container (aspect ratio not changed)
contain / cover background will be scaled to fit a single container, except that contain as much as possible will show a complete picture, the excess part of the container background-repeat property is treated to. , Will cover the entire container and cover with a picture, rather a part of the picture does not show up, will fill the entire container
contain the effect of
cover effect
3.background-origin
This property is used to set a background image drawing origin (FIG background, the background color is not included), which has three values:
border-Box from the bezel to start drawing
padding-box to start drawing from padding (default)
content from the content start-Box draw
Look at the effect, it is best to set background-repeat: no-repeat
Defaults: the Box-padding
border-Box effect of
content-box effect
