CSS background-color Property

Sets the solid background color for an element. This color fills the entire box model area up to the border, sitting behind any content or images.

selector { background-color: value; }
<color> Defines the color using a valid name, hex, RGB, or HSL value.
transparent The default value that makes the background fully clear so underlying elements show through.
inherit Adopts the background-color value from the parent element.
initial Sets the property to its default value of transparent.
revert Resets the property to the value specified in the browser's default stylesheet.
unset Resets the property to its natural state, which is either inherit or initial depending on the property.

Code Examples

A basic example showing a solid hex color applied directly to an element via inline styles.

<div style="background-color: #3498db; color: #ffffff; padding: 20px; border-radius: 8px;">
  This div has a solid blue background color.
</div>

An advanced example using JavaScript to dynamically toggle the background-color with a smooth CSS transition.

<div id="ui-box" style="background-color: #222222; color: #ffffff; padding: 40px; transition: background-color 0.3s;">
  <p>Interact to change the background.</p>
  <button onclick="toggleTheme()">Toggle Theme</button>
</div>

<script>
function toggleTheme() {
  const box = document.getElementById("ui-box");
  const isDark = box.style.backgroundColor === "rgb(34, 34, 34)";
  box.style.backgroundColor = isDark ? "#f1c40f" : "#222222";
  box.style.color = isDark ? "#000000" : "#ffffff";
}
</script>

Pro Tip

Use RGBA or HSLA values to control the opacity of the background color without affecting the transparency of the text or child elements. This allows you to create sophisticated layered designs like frosted glass effects without the headache of using the opacity property, which fades everything inside the element.

Deep Dive

Think of background-color as the base coat of paint on a wall. It covers the entire surface of the element's box, specifically the area defined by the background-clip property. By default, it extends behind the border. If you apply a background-image as well, the background-color acts as the bottom layer. This means if your image has transparency or fails to load, the color will show through. It is not inherited, so setting a color on a parent does not automatically paint the children, though children are transparent by default, making the parent's color visible behind them.

Best Practices

Always choose a background color that provides high contrast against your text. Use CSS variables to define your color palette so you can change the theme of your entire application from one central location. If you are using a background-image, always set a similar background-color as a fallback in case the image fails to load or the user has images disabled.

Common Pitfalls

The most common mistake is forgetting that the default value is transparent, not white. If your element seems to have a white background, it might be inheriting that look from a parent or the body. Also, remember that background-color will be hidden by an opaque background-image unless that image has transparent sections or is smaller than the container.

Accessibility

Contrast is king. Ensure your background and foreground colors meet WCAG AA standards, which usually requires a contrast ratio of at least 4.5:1 for standard text. Do not use color alone to convey meaning, as users with color blindness may not be able to distinguish between different colored backgrounds used for status updates or alerts.

Dev Data Table: background-color property

default transparent
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.backgroundColor = "#ff0000";
js_syntax_2 element.style.setProperty("background-color", "#ff0000");
js_note When targeting this property in JavaScript, use camelCase for the style object or the hyphenated string for the setProperty method.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...