The background universal property allows you to set several background characteristics at the same time.
Setting the image as the background, color, position, and so on.
May contain one or more values at once.
background-attachment - property sets whether the background image will scroll along with the element's content. The image can be fixed and remain still, or move along with the document.background-blend-mode - property describes how an element's background image should blend into the backgrounds of other elements.background-clip - property determines how the background color or background image should be rendered below the borders. The effect is noticeable with transparent or dotted borders.background-color - property allows you to set the background color.background-image - property allows you to specify a link to an image that will be applied to the background.background-origin - property defines the positioning area of the background image.background-position - specifies the starting position of the background image set with the background-image property.background-repeat - Determines how the background image set with the background-image property will be repeated. You can set the pattern to repeat only horizontally, vertically, or both sides.
By default, the background image will repeat indefinitely vertically and horizontally, filling the entire space for the image, unless otherwise specified. The background-repeat property helps eliminate this.If you use at least one background value, the others are automatically applied by default. Here is their list:
background-image: none; - Cancels the background image for an element.background-position: 0% 0%; - This places your background image at the top-left of the container.background-size: auto; - The size is calculated automatically based on the proportions of the picture.background-repeat: repeat; - The background image is repeated horizontally and vertically.background-attachment: scroll; - Allows the background to move along with the content.background-origin: padding-box; - The background is positioned relative to the edge of the element, taking into account the thickness of the border.background-clip: border-box; - The background extends to the outside edge of the border.background-color: transparent; - Sets transparent background.
.element {
background: /* value */;
}
If two identical properties are specified for the same selector, then preference is given to the property that is lower in the list.
For example, you need to get an image with a blue background and you specify the properties:
background-color: blue;
background: url(img/mouse.png) no-repeat;
We expect to see an image of a cat on a blue background, but there is none.
It turns out that the second background property has overwritten the first background-color value with the default value (i.e. transparent). You can solve the problem by swapping the lines:
background: url(img/mouse.png) no-repeat;
background color: blue;