Im trying to make a color overlay with an image css like this

CSS

body {
  background-image : url("bg.png");
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}

CodePudding user response：

Use the background CSS property, here's an example.

body {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

Credit: https://css-tricks.com/tinted-images-multiple-backgrounds/