How can I make a scrolling DIVs background transparent?

Question

I'm trying to make a semi-transparent image scroll up to reveal another image below it.

So far, I've got the top image scroll up and the fixed image underneath, but I can't figure out how to get the transparent parts of the top image to show the fixed image underneath.

I've made sure that the top image is transparent and tested it by setting the top slides background color to red, which works fine, but setting it to transparent still shows as white.

In the CSS I've put both of these to no avail:

background-color: transparent;

background-color: rgba(0, 0, 0, 0);

Could you tell me what I'm doing wrong or give me an alternate method to achieve this?

Thanks.

https://jsfiddle.net/3vw52ncb/2/

Answer 1

with help of jbutler483's fiddle, i have made what you want. You needed opacity to make image transparent and position: absolute; to remove white background.

Change your slide1'css with this code :

#slide_1 {
  background-image: url("http://i.imgur.com/TIaK19Z.png");
  background-size: 120%;
  background-color: rgb(0, 0, 0, 0.2);
  position: absolute;/* To remove white background */
  top: 0;
  opacity:0.8;/* To make the top image transparent */
  left: 0;margin-bottom:100vh;
}

you can change the opacity value according to your need.

Tranparent fiddle and if you want then with white background fiddle