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

Computed value

The computed color

Animatable

Yes

JavaScript syntax

object.style.backgroundColor

Interactive Demo

background-color: skyblue;

background-color: #5EA165;

background-color: rgb(46, 158, 203);

background-color: rgb(46, 158, 203, .5);

background-color: hsl(54, 63%, 49%);

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;  
}

Browser Support

The following table will show you the current browser support for the CSS background-color property.

Desktop
12	1	1	3.5	1

Tablets / Mobile
18	4	14	1	1	37

Last updated by CSSPortal on: 1st January 2024