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
4	12	1	1	3.5	1
Tablets / Mobile
≤37	18	4	Yes	1	Yes

Last updated by CSSPortal on: 20th October 2019