What CSS property sets the background color?

The CSS property that sets an element’s background color is background-color. It accepts color values such as named colors, hexadecimal notation, rgb(), hsl(), and the transparent keyword.

A declaration like body { background-color: lightblue; } paints the background behind the element’s content, padding, and border area according to CSS background painting rules. The property can be applied to many elements, not just the body, allowing cards, sections, table cells, and controls to have distinct backgrounds.

A common mix-up is color, which sets the foreground text color. background-image places an image behind the content, while border-color changes the color of the border around the element. The shorthand background property can also set background color along with an image, position, repeat behavior, size, and other background settings.

Backgrounds are not generally inherited in the same way as text color. If a child appears to share its parent’s background, that is often because the parent’s painted area surrounds it, not because the child inherited the property. CSS specificity and the cascade determine which matching background-color declaration wins.