4

When I want to combine two background images, I can simply separate them by comma, e.g.:

.foo {
  background-image: url(bg_1.jpg), url(bg_2.jpg);
  background-position: center center, left top;
  background-repeat: no-repeat, repeat;
}

etc.

What I want to do is to overlay a background image with a color (e.g. rgba(0,0,0,.5)) without having to create a separate layer, using pseudo elements or png images. I thought maybe css gradients may come handy?

sdvnksv
  • 9,350
  • 18
  • 56
  • 108
  • This can be easily done using [SVG images and CSS gradient functions](https://stackoverflow.com/a/49108254). The result is easily customizable textured gradients. – Clint Pachl Mar 05 '18 at 11:18

0 Answers0