CSS background-color Property
Description
The background-color property determines the background color of an element. The background of the element is the total size of the element, including the values of padding (inner margins of the element) and border (borders), but not including the value of the margin property (outer margins of the element). The color value is allowed to be specified both in the hexadecimal system and in RGB, RGBA, HSL, HSLA systems, as well as using predefined colors.
- Initial value
- transparent
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- The computed color
- Animatable
- Yes
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.backgroundColor
Syntax
background-color: <color>
Values
- <color>Accepts a single color as its value, which can be a keyword, hex, RGB, RGBa, HSL or HSLa color value.
- transparentThe default value; you will be able to see the elements behind the element in question showing through it.
- inherit
Example
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>body {
background-color: #3366CC;
}
h1 {
background-color: RGB(249, 201, 16);
}
p {
background-color: maroon;
color: white;
}Give it a Try
Click the button below to experiment with this property.
Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 4 | 12 | 1 | 1 | 3.5 | 1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| ≤37 | 18 | 4 | Yes | 1 | Yes |
Last updated by CSSPortal on: 20th October 2019