Background-color

We use the background-color property when we want to change the color of our background.

So for that we need to use some color: you can choose the color from Color Picker.

As you remember, the color can be written like the following types:

  • a color name - "red"
  • a HEX value - "#ff0000"
  • an RGB value - "rgb(255,0,0)"

When we want to change the background color of our tags, we just need to give the background-color property to our tag. The background-color of tags is transparent by default.

CSS Syntax

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

Let's see how we need to write it in our code.

We can write it in the other ".css" file, or in the <head> section, or give the inline css.

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
       <style>
         h2{background-color:#8ebf42;}
          p{background-color: #1c87c9;}
       </style>
   </head>
   <body>
        <h2>This is some heading as an example.</h2>
        <p>Some paragraph as an example.</p>
   </body>
</html>

Here is the result:




As you see in the above example, we use CSS in <head> section.

Now let's do the same with inline CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2 style="background-color:#8ebf42;">This is some heading as an example.</h2>
    <p style="background-color:#1c87c9;">Some paragraph as an example.</p>
  </body>
</html>

Here is the result:




As you see, we have written the same styles in other way.

And now let's see another example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 250px;
        padding: 20px;
        background-color: #645985;
        color: white;
      }
      h2 {
        padding: 18px;
      }
      p {
        height: 100px;
        padding: 20px 30px;
        background-color: #4c9689;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>This is some heading as an example.</h2>
      <p>Some link as an example.</p>
    </div>
  </body>
</html>

Here is the result:


Property Values

Value Description
color Indicates the background color. Look at CSS Color Values for a complete list of possible color values.
transparent Indicates that the background color should be transparent.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.