Talk about the 8 properties of background in CSS

As I mentioned before, each element in the document tree is just a rectangular box. These boxes have a background layer, which can be completely transparent or other colors, or it can be a picture. This background layer is controlled by 8 CSS properties (plus 1 shorthand attributes).

Background-color

The Background-color property sets the background color of the element. Its value can be any valid color value or the transparent keyword.

. Left {background-color: #ffdb3a;}. Middle {background-color: #67b3dd;}. right {background-color:transparent;}

The background color is drawn within the region of the box model specified by the [Background-clip] (#backgroundclip) property. If any background images are also set, the color layer is drawn behind them. Unlike an image layer that can have multiple layers, for an element, we can only have one color layer.

Background-image

The Background-image property defines one or more background images for an element. Its value is usually the URL of an image defined with a URL () symbol. You can also use none as its value, but this generates an empty background layer

. Left {background-image:url (' ire.png ');}. right {background-image:none;}

We can also specify multiple background images and separate them by commas. The pictures that follow are plotted behind a picture in the direction of the z-axis.

. Middle {   background-image:url (' khaled.png '), url (' ire.png ');  /* Other styles */  background-repeat:no-repeat;   background-size:100px;}

Background-repeat

The Background-repeat property controls the size of the background picture in the [Background-size] (#backgroundsize) property and is [Background-position] The (#backgroundposition) property is anchored after how to tile.

The value of this property can be repeat-x, repeat-y, repeat, space, round, no-repeat keywords, except repeat-x and repeat-y, other values can be defined once for the x and Y axes, and each dimension can be defined separately.

. top-outer-left {background-repeat:repeat-x;}. top-inner-left {background-repeat:repeat-y;}. top-inner-right {background-repeat:repeat;}. top-outer-right {background-repeat:space;}. bottom-outer-left {background-repeat:round;}. bottom-inner-left {background-repeat:no-repeat;}. bottom-inner-right {background-repeat:space repeat;}. bottom-outer-right {background-repeat:round space;}

Background-size

The Background-size property defines the size of the background picture, and its value can be a keyword, a length, or a percentage.

The keywords that are available for this property are "contains" and "cover". Contain will be equal to the maximum size of the scaled image. On the other hand, cover will scale the image to the smallest possible size, where the entire background area is still covered.

. Left {   background-size:contain;  Background-image:url (' ire.png ');   Background-repeat:no-repeat;}. right {background-size:cover;/* other styles same as. Left */}

For length and percent, we can specify the width of the background picture at the same time, and the percentage value is calculated based on the size of the element.

. left {background-size:50px;/* other styles same as. Left */}.right {background-size:50% 80%;/* Other styles same A S. Left */}

Background-attachment

The Background-attachment property controls how the background image scrolls relative to the viewport and element. It has three potential values.

Fixed means that the background picture is pinned to the viewport and does not move, even if the user is scrolling along the viewport. Local means that the background picture is fixed in its position within the element. If this element can scroll and the background image is positioned at the top, then when the user scrolls down the element, the background image will be scrolled out of view. The last scroll means that the background picture is fixed and does not scroll as the content of the element scrolls.

. Left {   background-attachment:fixed;  background-size:50%;  Background-image:url (' ire.png ');   Background-repeat:no-repeat;  Overflow:scroll;}. Middle {background-attachment:local;/* other styles same as. Left */}.right {background-attachment:scroll;/* Other Styles same as. Left */}

Background-position

This property, combined with the Background-origin property, defines where the background picture should start. Its value can be a keyword, a length, or a percentage, and we can specify the position along the x-axis and y-axis.

The keywords that are available for this property are top, right, bottom, left, and center, and we can arbitrarily combine these keywords, and if only one keyword is explicitly specified, then the other default is center.

. top-left {   background-position:top;  background-size:50%;  Background-image:url (' ire.png ');   Background-repeat:no-repeat;}. top-middle {background-position:right;  /* Other styles same as. Top-left */}.top-right {background-position:bottom;  /* Other styles same as. Top-left */}.bottom-left {background-position:left;  /* Other styles same as. Top-left */}.bottom-right {background-position:center;  /* Other styles same as. Top-left */}

For length and percentage, we can also specify the position along the x-axis and y-axis. Percent values are calculated by the size of the element.

. Left {background-position:20px 70px;/* Others same as. Top-left */}.right {background-position:50%;/* Others same As. Top-left */}

Background-origin

The Background-origin property specifies which area of the box model the background picture should be positioned on.

When the value is Border-box, the position of the background picture is positioned according to the border area, and its position is positioned according to the margin area when the Padding-box is Content-box, and its position is located according to the content area.

. Left {   background-origin:border-box;  background-size:50%;  Background-image:url (' ire.png ');   Background-repeat:no-repeat;  Background-position:top left;   border:10px dotted black;   padding:20px;}. Middle {background-origin:padding-box;  /* Other styles same as. left*/}.right {background-origin:content-box;  /* Other styles same as. left*/}

Background-clip

The Background-clip property determines the background drawing area, which is the area where the background can be drawn. As with the Background-origin property, it is also based on the area of the box model.

. left{   Background-clip:border-box;  background-size:50%;  Background-color: #ffdb3a;   Background-repeat:no-repeat;  Background-position:top left;   border:10px dotted black;   padding:20px;}. Middle {background-clip:padding-box;  /* Other styles same as. left*/}.right {background-clip:content-box;  /* Other styles same as. left*/}

Background

Finally, the background property is shorthand for other background-related properties. The order of the child attributes does not matter, because each property has a different data type. For Background-origin and Background-clip, however, if only one box model area is specified, both properties will apply this value. If two is specified, the first value is used for the Background-origin property.