CSS Background Color
The CSS background-color property sets the color displayed behind an element's content and padding.
Background colors can be applied to individual elements or large areas of a page and can use any supported CSS color value. They can also appear underneath transparent or partially transparent background images.
Setting a Background Color
The background-color property accepts a CSS color value.
.box {
background-color: lightblue;
}The color is painted behind the element's content and padding. By default, the background also extends underneath the border, although the border itself can cover that part of the background.
The initial value of background-color is transparent, so an element does not have an opaque background color unless one is specified or inherited through another background painting behavior.
Background Color Values
The background-color property can use the same CSS color formats used by other color properties.
.named {
background-color: steelblue;
}
.hex {
background-color: #0088cc;
}
.rgb {
background-color: rgb(0 136 204);
}
.hsl {
background-color: hsl(200 100% 40%);
}
.hwb {
background-color: hwb(200 0% 20%);
}These formats provide different ways to describe a color. The CSS Colors tutorials cover color values and color models in greater detail.
Transparent Backgrounds
Background colors can include an alpha value to make the color partially transparent.
.box {
background-color: rgb(0 136 204 / 50%);
}In this example, the steel blue color is displayed at 50% opacity, allowing content or colors behind the element to remain partially visible.
The keyword transparent represents a fully transparent color.
.box {
background-color: transparent;
}Using transparency in the background color is different from applying the opacity property to the element. A transparent background does not automatically make the element's text and other content transparent.
Background Painting Area
An element's background is painted within its box. By default, the background extends to the outside edge of the border.
.box {
padding: 20px;
border: 10px dashed steelblue;
background-color: lightblue;
}Because parts of a dashed border are transparent, the background color can be visible underneath the spaces in the border.
The background-clip property can change how far the background is painted. It will be covered separately later in this section.
Background Color with Images
An element can have both a background color and a background image.
.box {
background-color: lightblue;
background-image: url("images/leaves-400x400.png");
background-repeat: no-repeat;
}The background color is painted behind the background image. Because our autumn leaves image has transparent areas, the background color can remain visible around and through those transparent areas.
A background color can also provide a useful fallback while a background image is loading or when the image cannot be displayed.
Background Color and Text
When text appears over a background color, the foreground and background colors should provide enough contrast for the text to remain easy to read.
.message {
color: white;
background-color: steelblue;
}Color combinations that look attractive are not always readable. Text contrast is especially important for users with low vision and when content is viewed on different screens or under different lighting conditions.
The CSS Color Contrast tutorial explains how foreground and background colors can be evaluated for accessible text contrast.
Background Color Example
The following example applies a background color to a box containing text.
.box {
padding: 20px;
background-color: lightblue;
}Open the example in the editor and change lightblue to another named color, hexadecimal value, RGB value, or HSL value. You can also try a color with an alpha value to see how transparency affects only the background color.