CSS background-color Property

CSS background-color property specifies the background color of an element. The color value can be specified in any valid CSS color formats like ‘color name’, ‘HEX ‘, ‘RGB’, ‘HSL’, etc.

In the example below, the <h2> element has a yellow color background:

Example:

h2{
  background-color: red;
}

Similarly, we can use the <body> element to set the background color of the whole HTML body. See the example below:

Example:

body{
  background-color: cyan;
}

Set background-color using different color formats:

Example:

h1{
   background-color: #FF7F50;  /* HEX Value */
}
h2{
  background-color: rgb(11, 252, 3);  /* RGB Value */
}
h3{
  background-color: hsl(182, 98%, 50%);  /* HSL Value */
}
p{
  background-color: transparent; /* Transparent background */
}

CSS Syntax

The background-color property has the following syntax:

background-color: color|transparent|initial|inherit;

Property Values

The background-color property accepts the following values:

colorSpecifies the background color of an element in any valid CSS color formats like ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc.
transparentSpecifies a transparent background color. This is the default.
initialSets the background-color property to its default value(transparent).
inheritInherits the background-color property from the parent element.

General Info

Default Valuetransparent
InheritedNo
JavaScript Usageelement.style.backgroundColor = “red”

Related Pages

CSS Tutorial: CSS Background

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment