I have a photo as a background to a div. But I want to add two more 'layers' on top of it.

#div-info{
  background-image: url(/img/photo.jpg);
}

1. I want to add 'noise' on that photo, a png transparent texture.
2. I want to add a colour overlay (I think overlay is the right word for this?) above that.

Can anyone help me? Thank you in advance for your help. I am new here and this is my first post!

Hey, I think you want to take a look at Multiple Backgrounds by the legendary Chris Coyier.

Hello @BrowserBugs. I hope you are well. Thank you for that lovely reply. I love this website and I am constantly finding articles there I enjoy.

However I have bad news.

header {
            height: 100vh;
            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('/img/creased-paper.png'), url('/img/photo.jpg');
}

It works for two images. Great! It works for the linear-gradient and one image. Great! But it will not work for the linear-gradient and two images together.

Compromise: It does not have to be a linear gradient, it can be just a colour with transparency.

Thank you in advance for your help and HAPPY FRIDAY!

Happy Friday! All good, was just a first thought, in which case try old school and multi-stack?

<div class="base"><div class="shade"></div></div>

.base{
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Macaca_sinica_-_01.jpg/220px-Macaca_sinica_-_01.jpg') center no-repeat;
  height: 330px; width: 220px;
}
.shade{
  height: 100%; width: 100%; background: rgba(25, 25, 25, 0.25);
}

Fiddle here.

That also does not want to work for me... and why do you refer to that as 'old school'? Thank you again, @BrowserBugs.

Hahaha I call it old school because before multiple backgrounds we used to have to stack containers. Have you live code of what you have or could you set up a fiddle so I can see?

Edit: Also look at css filters, a good example here. Normally the answer comes with a mix of ways to achieve things.

Edited July 23, 20197 yr by BrowserBugs