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

HTML

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

CSS

body { 
   background-color: #3366CC;
} 
h1 { 
   background-color: RGB(249, 201, 16); 
} 
p { 
   background-color: maroon;
   color: white;  
}

Result

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	14	1	1.0

Last updated by CSSPortal on: 20th October 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu