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.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
412113.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184Yes1Yes

Last updated by CSSPortal on: 20th October 2019