Background-color - Property CSS

background-color

Summary of characteristics of the `background-color` property

Quick description

Sets the background color.

Status

Standard

Usable for

HTML

Predefined values

transparent | currentcolor

Percentages

Can be used to set color with certain functions.

Initial value

transparent

Inherited by default

No.

Animation type

Computed value : during an animation, the background-color property gradually changes from one value to another.

W3C Module

CSS Backgrounds and Borders Module

References (W3C)

🡇

🡅

CSS Backgrounds and Borders Module Level 3

Document status: CR (Candidate Recommendation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Document status: REC (Recommendation)

Cascading Style Sheets specification - Version 1

Document status: DEPR (Old specification, declared obsolete or superseded)

Syntax diagram of `background-color`.

Syntax diagram of the background-color property.
More details on the values.

This diagram shows all the ways to specify a color in CSS:

color-name is the name of a color. Many colors have been given a standardized name: see the Color chart.
#xxxxxx is the hexadecimal code of the color, most often on 6 digits, but the syntax accepts a code on 3 or 8 digits.
color is a color specified by one of the following functions: rgb() or rgba(), hsl() or hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description of the `background-color` property.

background-color sets the background color. If one or more background images are also defined (with the background-image property, they take precedence over the color, However, the latter can be visible through the transparent parts of the background images.

The color can also be mixed with background images with the background-blend-mode property.

In the case of multiple backgrounds (see page background), the color remains unique, however, and cannot be set for each of the background images: the color is positioned below all the background images.

Finally, the background color may only cover the content area, padding, etc. based on the value assigned to the background-clip property.

Refer to background for an explanation of how backgrounds work in general.

Values for `background-color`.

background-color: transparent;

Default.

none
background-color: lavender;

In this example, the color is designated by its name. See Color chart.

lavender
background-color: #42A824; background-color: rgb(48 128 45);

The color can be written in any form recognized by CSS (see Colors).

#421824

rgb(48 128 45)

hsl(45deg 50% 50%)

Global values
(common to all properties):


background-color: initial  (transparent)
background-color: inherit
background-color: revert
background-color: revertLayer
background-color: unset

See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animation of the `background-color` property.

Because color codes are numeric values, background-color lends itself very well to animations. Even when the color is specified by its name (red, cyan, etc.) the browser performs the conversion into the corresponding numeric code.

Specifying colors with the hsl() function is sometimes more convenient because it allows, for example, to keep a fixed shade while only varying the brightness.

Manipulating the `background-color` property programmatically.

Change the background color in Javascript.

Here are two examples of Javascript code to change the value of background-color for an el element. We can see that Javascript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with camel-case notation, more common in Javascript (a capital letter to separate words).


	let el = document.getElementById('id');
	el.style['background-color'] = 'silver';
	// or
	let el = document.getElementById('id');
	el.style.backgroundColor = 'silver';

Read the background color.

Here is an example of code to read, with Javascript, the value of background-color. The property must be directly affected to the element itself via its style attribute, and not in CSS via a selector. The color is returned under its name if it is a named color, or in the form rgb(r,g,b) or rgba(r,g,b,a) if it has been defined other than by its name (hexadecimal code, HSL notation, etc.).


	let el = document.getElementById('id');
	let value = el.style['background-color'];
	// or
	let el = document.getElementById('id');
	let value = el.style.backgroundColor;

Read the computed value of `background-color` in Javascript.

Here's how to read the computed value of background-color with Javascript. The color is returned in the form rgb(r,g,b), or rgba(r,g,b,a) if the opacity is not total.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('background-color');

Change the background color with JQuery.

Avec JQuery, voici comment modifier la valeur de la propriété background-color pour l'élément el :


 $('#id').css('background-color', 'silver');
 // or
 $('#id').css('backgroundColor', 'silver');

Read the computed value of the `background-color` property with JQuery.

Reading the computed value of the background-color property with JQuery can be done with the following codes. As in Javascript, the color is returned in the form rgb(r,g,b) or rgba(r,g,b,a) if the color is not not totally opaque.


	let value = $('#id').css('background-color');

Test it yourself.

The buttons below apply the entered value to the background-color property and then display either the value as applied, or the calculated value. This second option allows you to see how the value of background-color is stored (serialized). In particular, we note that colors are always stored in the form rgb().

Simulator.

background-color :

transparent

currentcolor

Browser compatibility.

There are no compatibility issues: all browsers have long supported the background-color property.

Column 1

Support for the background-color property to set the background color (in addition to images).

background-color
property

Estimated overall support.

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `background-color` property.

The original definition of background-color dates back to the very first CSS specification. It has changed little since then. But the ways of specifying colors have evolved a lot.

Cascading Style Sheets specification - Version 1

First specification of the CSS language.
Initial definition of the background-color property.

November 17, 1995
Working Draft.
November 12, 1996
Proposed for recommendation.
December 17, 1996
Recommendation .
September 13, 2018
Old specification, declared obsolete.
Cascading Style Sheets Level 2 - Revision 1 Specification

Adding inherit value to force the property to the value inherited from the parent.

November 04, 1997
Working Draft.
March 24, 1998
Proposed for recommendation.
May 11, 1998
Recommendation .
CSS Backgrounds and Borders Module Level 3

No change in the definition of background-color itself, but many new features regarding color management (see the "Other CSS references/CSS colors" menu.

August 02, 2002
Working Draft.
December 17, 2009
Candidate Recommendation.