CSS Background

CSS background properties are used to define the background effects of an element.

In these chapters, you will learn about the following CSS background properties:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color The background-color property specifies the background color of an element.

Example

The background color of the page is set as follows:

body {
  background-color: lightblue;
}

Try It Yourself

Colors are usually specified in the following ways through CSS:

  • Valid color names - for example "red"
  • Hexadecimal values - for example "#ff0000"
  • RGB values - for example "rgb(255,0,0)"

Please see CSS Color Values, for a complete list of possible color values.

Other elements

You can set the background color for any HTML element:

Example

In this example, <h1>, <p>, and <div> elements will have different background colors:

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

Try It Yourself

Opacity/Transparency

The opacity property specifies the opacity/transparency of an element. The range of values is 0.0 - 1.0. The lower the value, the more transparent it is:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

Example

div {
  background-color: green;
  opacity: 0.3;
}

Try It Yourself

Note:Use opacity When the opacity property is used to add transparency to the background of an element, all its child elements inherit the same transparency. This may make the text inside completely transparent elements difficult to read.

Using RGBA opacity

If you do not want to apply opacity to child elements, for example in the above example, please use RGBA Color value. The following examples set the background color instead of the text opacity:

100% opacity
60% opacity
30% opacity
10% opacity

From our CSS Colors In this chapter, we learned how to use RGB as color values. In addition to RGB, RGB color values can also be used with alpha channels are used together (RGBA) - This channel specifies the opacity of the color.

RGBA color values are specified as: rgba(red, green, blue, alpha)alpha The parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip:You can find more information in our CSS Colors Learn more about RGBA colors in this chapter.

Example

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

Try It Yourself