CSS background-color

The CSS background-color property is used to change the color of specified element's background. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {background-color: chocolate; color: white; padding: 12px;}
   </style>
</head>
<body>
   
   <div id="myd">
      <h2>The background-color Property</h2>
      <p>This is an example of background-color property in CSS.</p>
   </div>
   
</body>
</html>

Output

The background-color Property

This is an example of background-color property in CSS.

Note - The background area of an element is the area of its content, along with its padding and border area.

CSS background-color Syntax

The syntax of background-color property in CSS, is:

background-color: x;

The value of x should be any of the following:

color - used to define custom background color. For example: red, #ccc, rgb(23, 134, 32) etc.
transparent - used to specify the transparent background. This is the default value
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS background-color Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      body {background-color: gray;}
      p {color: white; padding: 16px 12px;}
      .a {background-color: #ff0000;}
      .b {background-color: rgb(255, 0, 0);}
      .c {background-color: rgba(255, 0, 0, .3);}
      .d {background-color: hsl(0, 100%, 50%);}
      .e {background-color: hsla(0, 100%, 50%, .3);}
   </style>
</head>
<body>
   
   <div class="a">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
         maiores aperiam accusantium libero facere recusandae, maxime
         nihil quasi odit ipsa ut hic culpa nisi dignissimos neque adipisci,
         quibusdam ratione repudiandae eius temporibus itaque reiciendis.</p>
   </div>
   <p class="b">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
   <p class="c">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
   <p class="d">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
   <p class="e">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt maiores aperiam accusantium libero facere recusandae, maxime nihil quasi odit ipsa ut hic culpa nisi dignissimos neque adipisci, quibusdam ratione repudiandae eius temporibus itaque reiciendis.

Lorem ipsum dolor sit amet, consectetur adipisicing.

Note - The rgb() Function is used to apply the color based on the red, green and blue color intensity parameters.

Note - The rgba() Function is used to apply the color based on the red, green, blue, and alpha (opacity) parameters.

Note - The hsl() Function is used to apply the color based on hue, saturation, and lightness parameters.

Note The hsla() Function is used to apply the color based on hue, saturation, lightness, and alpha (opacity) parameters.

CSS Online Test

« Previous Tutorial Next Tutorial »