Background Color

With CSS, a color is most often specified by:

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

This color chart can be used as a guide to colors, by name or hex values.

The background-color property specifies the background color of an element. The background color of this "page" can be set like this:

body {
    background-color: #b0c4de;
}

Each element on the webpage can have different background colors. They can be "pasted" on top of the background color of the webpage. In this example, the <body>, <h1>, <p>, and <div> elements have different background colors:

HTML file: Displayed by browser:
<style>
body {
    background-color: lemonchiffon;
}
h1 {
    background-color: #6495ed;
}
p {
    background-color: #e0ffff;
}
div {
    background-color: #b0c4de;
}
</style>
<body>
  <h1>CSS background-color example!</h1>
  <div>This is text inside a division element.
  <p>This paragraph has its own background color.</p>
  We are still in the division element.</div>
</body>

CSS background-color example!

This is text inside a division element.

This paragraph has its own background color.

We are still in the division element.





This is the background color of the entire webpage.

Back buttonTable of ContentsNext button