How To Add A Background Image On Top Of A Previous Background Image?

I have a css page that I am writing and I need to apply a background image in one class and then use a different class to put a partially transparent background image on top of the

Solution 1:

You can consider CSS variables. Specify 2 background layer that you can change later. You can easily scale to any number of background:

.container > div {
  background:
    /*we make the default value a transparent image*/var(--im1,linear-gradient(transparent,transparent)),
    var(--im2,linear-gradient(transparent,transparent)); 
    
  height:200px;
  width:200px;
  display:inline-block;
}

.background1 {
  --im2: url(https://picsum.photos/200/300?image=0);
}

.background2 {
  --im2: url(https://picsum.photos/200/300?image=1069);
}

.backgroundFilter {
  --im1: linear-gradient(to right,transparent,green);;
}

<divclass="container"><divclass="background1">...</div><divclass="background1 backgroundFilter">...</div><divclass="background2">...</div><divclass="background2 backgroundFilter">...</div></div>

You can also consider a pseudo element for the new background but you are limited with only 3 backgrounds since we have only 2 pseudo elements:

.container > div { 
  height:200px;
  width:200px;
  display:inline-block;
  position:relative;
  z-index:0;
}

.background1 {  
  background: url(https://picsum.photos/200/300?image=0);
}

.background2 { 
  background: url(https://picsum.photos/200/300?image=1069);
}

.backgroundFilter::before {
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(to right,transparent,green);;
}

<divclass="container"><divclass="background1">...</div><divclass="background1 backgroundFilter">...</div><divclass="background2">...</div><divclass="background2 backgroundFilter">...</div></div>