Background
background-color
background-color sets the background color of an element. When there is a background image or gradient, the color is painted underneath it.
Syntax
<color>Preview
Code
.box {
border: 8px dashed #4a86cb;
background-color: #88d1c7;
}Controls
About
Writing colors
Like color, it takes names, hex values and functions such as rgb(). The initial value is transparent. With currentcolor, the background takes the element’s text color.
Where it is painted
By default it is painted under the border too. In the preview here you can see it through the gaps of the dashed border. To stop at the inside of the border, use background-clip: padding-box. Rounded corners (border-radius) clip the background color to the same shape.
With background images
There is only one background color, and it is always the bottom layer. Images and gradients from background-image sit on top of it, so it shows through transparent parts of an image and wherever the image doesn’t reach.
Watch out
- It is not inherited. Since the initial value is transparent, the parent’s background shows through elements that don’t set one.
- A later
backgroundshorthand resets any color it doesn’t mention totransparent. Put the color in the shorthand, or write background-color after it. - A translucent color fades only the background.
opacityfades the text and everything inside as well.