CSS background color – 2 Examples to set bg color, opacity

The background color property of CSS

The Background color property is used to set the background color of HTML elements. For example, setting the background colors of headings in your web page.

A background color example

Similarly, setting the background color of the entire body, paragraphs or div elements of the document. Following are a few background-color CSS property examples, let us first look at its syntax:

Syntax of CSS background color

The syntax to use background color property:



background-color: red;


background-color: rgb(33,45,55)

The background color can be set by using:

  • Hexadecimal value: This value is given by using a hash sign (#) and up to 6 HEX values (0-F) in the background-color property.
  • Color name: Giving a color name in background color property like red, green, yellow etc. Generally, this is not the preferred method.
  • RGB: RGB stands for Red, Green, Blue. It defines the values of red, green and blue at the range of 0-255 for each. For example, for the R if it is set to 0 means no red and 255 would mean full red.

Example of using background color property

Following example shows how to use the background color property. We will set the colors of <h1>, <p> and <div> tags by using the background-color property.

CSS background color property

Experience this example online

CSS background transparent or no opacity example

Following example shows background color as the transparent. By default, the background color property value is set to transparent.

One of the ways you can set the opacity or transparency is with RGBa. To set background opacity or transparent background you can use the fourth value as shown below:

CSS background opacity

Experience this example online

As you can see the color of <h2> heading is made transparent by background color opacity in RGB part.


See Also CSS background