CSS Background-background

• Composite attribute-background

If both Background-color and Background-image are set, the background color is overwritten by the picture.

Background-image: A picture used as a background, background:url ();

If you set the background as a picture, then we will consider the following properties.

Background-repeat:

Repeat-x: Tile Horizontally

Repeat-y: Tile Vertically

Round: The background image is automatically scaled until it fits and fills the entire container.

Space: The background image is tiled with the same spacing and fills the entire container or direction.

Repeat: The background image is tiled horizontally and vertically, with default values.

No-repeat: Uneven Shop

Background-size:

With two parameters, the value can be either PX or% or auto (default). If there is only one parameter, it is scaled as width, height, etc., if the background picture is larger than the container, it will be cropped. If there are two parameters, the width is high.

Cover: The background image is larger than the zoom to completely overwrite the container, the background image may be out of the container, but the excess portion will be cropped.

Contain: This property value can enlarge or reduce the scale of the background picture. Contain only requires a container to be covered in one direction, such as portrait or landscape, to minimize container coverage.

Background-position: Determine the location of the background picture

Background-position:length | | Position

length:<percentage> | <length>

Position:left Center|left top| ......

1, background-position:0 0;
The upper-left corner of the background image is aligned with the upper-left corner of the container element. The setting is background-position:left top; or background-position:0% 0%; the effect is consistent. The property positioning is not affected by the padding of the element, for example, we add a padding value to the container element, only the height and width of the container element is affected, and the upper-left corner of the background image is aligned with the upper-left corner of the container element.

2, background-position:-10px-20px;

The picture is shifted to the left by the top left corner of the container by 10px, offset by 20px upward,

3, background-position:50% 50%;

The picture is centered horizontally and vertically. and Background-position:center Center, the effect is equal.

is equivalent to the width of the x:{container (container)-the width of the background picture is}*x percent, and the excess portion is hidden.
is equivalent to the height of the y:{container (container)-the height of the background image is}*y percent, and the excess portion is hidden.

x= (300-178) *50%=61px y= (300-108) *50%=96px

4, background-position:100% 100%;

The picture is in the lower-right corner of the container element, and the Background-position:right bottom the same effect.

Background-attachment: Defines what happens to the background picture when the user scrolls the page.

Scroll: Default, the background image is fixed with respect to the element, and the background moves with the page scrolling, that is, background and content bindings.

However, there is one case exception: for elements that can be scrolled (elements set to Overflow:scroll). When Background-attachment is set to scroll, the background map does not scroll with the content of the element scrolling.

Fixed: The background image with respect to the viewport, even if the element has a scroll bar, the background image does not move with the content, as if the background image is pinned to the same window.

Local: The background image is fixed relative to the element content.

The background image moves as you scroll through the rest of the page. However, if the content is a scrollable element (set to Overflow:scroll Element), the background graph scrolls with the content of the element as it scrolls, since the background map is positioned relative to the element's own content and begins to be fixed, and the background graph scrolls with the content after the element has a scroll bar.

This is the basic knowledge of background this composite property ~

CSS Background-background