CSS background-color

« Prev Next »

The background-color property specifies the background color of an element. The background color can be used to make an element stand out or to separate part of a page from another.

selector {
  background-color: color;
}
  • selector – The HTML element you want to style.
  • color – A valid color name, HEX, RGB, RGBA, HSL, HSLA, or transparent.

css-background-color

Type Example
Color name red, blue, green
HEX #ff0000, #00ff00
RGB rgb(255, 0, 0)
RGBA (with opacity) rgba(255, 0, 0, 0.5)
HSL hsl(120, 100%, 50%)
HSLA hsla(120, 100%, 50%, 0.3)
Transparent transparent

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }

    h1 {
      background-color: yellow;
    }

    p {
      background-color: #90ee90;
    }
  </style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Run ›
notepad
  • The background-color property only affects the content area of an element and does not change the background color of the border or the margin.
  • Use RGBA or HSLA color values to add transparency.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.