CSS background-color Property

CSS background-color property sets an element background color. The background of an element is the total size of it which includes padding and border (but not the margin).

So, for setting a background color you need to choose any color. You can choose colors from our Color Picker tool. The color can be written like the following types: a color name - "red", a HEX value - "#ff0000" and an RGB value - "rgb(255,0,0)".

It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough, so people with low vision will be able to read the content of the page.

Initial Value transparent
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited No.
Animatable Yes. The color of the background is animatable.
Version CSS1
DOM Syntax object.style.backgroundColor = "#FFFFFF";

Syntax

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

Example of the background-color property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #8ebc42;
      }
    </style>
  </head>
  <body>
    <h2>Background-color Property Example</h2>
    <p>Here the background-color is specified with a hex value.</p>
  </body>
</html>
CSS background-color property

You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names as a value for the background-color property. Learn more about HTML Colors.

Example of the background-color property with the "transparent" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Background-color Property Example</h2>
    <p>In this example the background-color is set to transparent. This is the default value.</p>
  </body>
</html>

Example of the animated version of the background-color property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #eee;
        animation: mymove 5s infinite;
      }
      @keyframes mymove {
        30% {
          background-color: #1c87c9;
        }
      }
    </style>
  </head>
  <body>
    <h2> Animation of background-color property</h2>
    <p>
      In this example it gradually changes the background color from grey to blue, and back to grey.
    </p>
  </body>
</html>

Values

Value Description Play it
transparent This is the default value and it defines the background color as transparent. It means that there is no background color. Play it »
color Defines the background color. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Play it »
initial Sets the property to its default value. Play it »
inherit Inherits the property from its parent element.

Browser support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

What is the purpose of using 'background-color' property in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?