As I mentioned earlier, each element in the document tree is just a rectangular box. Each of these boxes has a background layer, which can be completely transparent or any other color, or it can be an image. This background layer is controlled by eight CSS properties (plus one shorthand property).
background-color
The background-color property sets the background color of the element. Its value can be any legal color value or the transparent keyword.
.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }
Copy the code
The background color is drawn within the region of the box model specified by the [background-clip] (# backgroundclip) attribute. If any background images are also set, a color layer is drawn behind them. Instead of having multiple image layers, we can have only one color layer for an element.
background-image
The background-image attribute defines one or more background images of an element. Its value is usually the URL of the image defined with the URL () symbol. You could also use None as its value, but that would produce an empty background layer
.left { background-image: url('ire.png'); }
.right { background-image: none; }
Copy the code
We can also specify multiple background images separated by commas. All subsequent images are drawn after the previous image in the Z direction.
.middle {
background-image: url('khaled.png'), url('ire.png');
/* Other styles */
background-repeat: no-repeat;
background-size: 100px;
}
Copy the code
background-repeat
Background-repeat controls whether the background image is resized by [background-size] (# backgroundsize) and is resized by [background-position] (# backgroundposition) ) how to tile property after positioning.
The values of this property can be the repeat-x, repeat-y, repeat, space, round, no-repeat keywords. Other values besides repeat-x and repeat-y can be defined once for the X and Y axes, or 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; }
Copy the code
background-size
Background-size defines the size of the background image. Its value can be a keyword, length, or percentage.
The keywords that can be used for this property are “contains” and “cover”. Contain will scale the image to its maximum size. Cover, on the other hand, scales 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 */ }
Copy the code
For length and percentage, we can specify the width and height of the background image at the same time. 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 as .left */ }
Copy the code
background-attachment
The background-attachment property controls how the background image scrolls relative to the viewport and elements. It has three potential values.
Fixed means that the background image is fixed to the viewport and does not move, even if the user is scrolling along the viewport. Local means that the background image is fixed to its position in the element. If the element is scrollable and the background image is positioned at the top, when the user scrolls down the element, the background image will be rolled out of the view. Finally, scroll means that the background image is fixed and does not scroll as the element content is rolled.
.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 */ }
Copy the code
background-position
This property, in combination with the background-Origin property, defines where the starting position of the background image should be. The value can be keyword, length, or percentage, and we can specify the position along the x and y axes.
The keywords that can be used for this property are top, right, bottom, left, and center. We can combine these keywords any way we want. If only one keyword is explicitly specified, 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 */ }
Copy the code
For length and percentage, we can also specify positions along the x and y axes. The percentage value is 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 */ }
Copy the code
background-origin
The background-origin property specifies which region of the box model the background image should be positioned against.
When the value is border-box, the position of the background image is positioned according to the border area; when the value is padding-box, the position is positioned according to the margin area; when the value is Content-box, the position is positioned 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*/ }
Copy the code
background-clip
The background-clip property determines the background draw region, which is the region where the background can be drawn. Like the background-Origin property, it is based on the region 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*/ }
Copy the code
background
Finally, the background property is shorthand for other background related properties. The order of the child attributes is irrelevant because each attribute has a different data type. However, for background-origin and background-clip, if only one box model region is specified, this value is applied to both properties. If two are specified, the first value will be used for the background-origin attribute.