How to set the background using the CSS background property

12.08.18 IT / CSS 2913

To set the background for an HTML element, in CSS there is a special property - background . This is a shorthand for many of the properties that control the appearance of an element. The values ​​can be specified in any order, the browser is able to independently determine which of them corresponds to the desired property.

Among the many properties for setting the background, the following are usually distinguished:

• background-attachment - Sets whether the background image scrolls along with the content of the element. Possible values: fixed, scroll, inherit, local ;
• background-clip - Determines how the background image or background color will be displayed below the borders. Possible values: padding-box, border-box, content-box ;
• background-color - serves to define the background color of an element. Possible values: transparent, inherit ;
• background-image - sets the background image for the element. Possible values: url, none, inherit ;
• background-origin - defines the positioning area of ​​the background image. Values: padding-box, border-box, content-box ;
• background-position - sets the initial position of the background image set using the corresponding property. Values: inherit and also px, em , etc .;
• background-position-x - sets the horizontal position of the background image inside the element, is a non-standard property and is not part of the specification. Values: inherit, left, center, right and px, em , etc .;
• background-position-y - sets the vertical position of the background image inside the element, is a non-standard property and is not part of the specification. Values: inherit, top, center, bottom and px, em , etc .;
• background-repeat - defines how the background image set using the corresponding property will be repeated. Values: no-repeat, repeat, repeat-x, repeat-y, inherit, space, round ;
• background-size - sets the scale of the background image according to the specified dimensions. Values: auto, cover, contain and %, px, em , etc.

Thus, the universal property background contains many properties that can be written individually or at one time in the background property.