Webzstore
The CSS 'background-color' property sets an element's background color. By default (background-clip: border-box), the color is painted across the content and padding areas and extends underneath the border, so it shows through a transparent, semi-transparent or dashed border. The background-clip property can change that painted area, for example to stop at the padding edge. Making the color transparent affects whether the background is visible, not where it is positioned. The 'background-color' property is a fundamental aspect of web design, allowing for color customization of almost any element on a webpage.
See the Pen CSS 'background-color' Property by Webzstore (@webzstore) on CodePen.
The 'background-color' property is a versatile tool in CSS, enabling developers and designers to easily customize the appearance of elements and improve the user interface of web projects.
Browser Support For 'background-color' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 3.5 | Nov 1998 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background-color for the full compatibility details, including mobile browsers.
CSS Syntax of the 'background-color' Property
background-color: color | transparent | initial | inherit;
Usage of the 'background-color' Property
This property defines a solid color for an element's background. It's widely applied for purposes ranging from setting the color of text containers to defining hover states for interactive elements to creating colored backgrounds for sections or entire web pages. The 'background-color' property can accept any valid CSS color value, including named colors, HEX codes, RGB(a), and HSL(a) values.
Property Values of the 'background-color' Property
- Color: Specifies the background color of the element using any valid CSS color format (e.g., #ff0000, RGB (255, 0, 0), red, etc.).
- Transparent: Makes the background color fully transparent. This is the default value for most elements, meaning that they have no background color unless one is specified.
- Initial: Resets the property to its default value, which is typically transparent for most elements.
- Inherit: Inherits the 'background-color' property from the element's parent (the property is not inherited by default). This can be useful for ensuring that child elements have the same background color as their container without explicitly setting the color again.
