How to set an opacity only to the background image of a div with CSS?

Spread the love

To set an opacity only to the background image of a div with CSS, we set the rgba value.

For instance, we write

div {
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url("your_image.png");
}

to set the background-image of the div to a linear gradient with the rgba values.

0.5 is the opacity.

And we add the URL of the background image after the linear-gradient.