0

For example I have this CSS to give a background image to my web site:

  body{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background-image: url(/images/grid.png);
    background-repeat: repeat; 
  }

It is a simple repeating image but I want to make it opaque with an alpha value of .5.

Can I do this in the CSS?

If I apply opacity

    opacity: .5;

directly to the body tag, it actually makes everything except the background opaque.

howard
  • 234
  • 1
  • 11
  • take a look at here : https://stackoverflow.com/questions/36679649/how-to-add-a-color-overlay-to-a-background-image/36679903#36679903 it might inspire you .https://codepen.io/gc-nomade/pen/wouBe there is also a background-blend-mode example. – G-Cyrillus Sep 23 '21 at 13:08

1 Answers1

0

No, but you can apply a color with transparency on top to simulate opacity.

background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), url('image.png');
bpardo
  • 401
  • 5
  • 11