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
  • 8,706
  • 15
  • 46
  • 96
  • 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