Z-index background color not working for me

[OneStew]

Hi, I have tried to implement z-index into my code to layer two different background colors ontop of one another but it isn’t working for me. I would like to have a similar look in this example as well as learning how to do it.

Here is the example and it’s background I would like to replicate: https://codepen.io/freeCodeCamp/full/VPaoNP

And here is my project, code so far: https://codepen.io/OneStew/pen/XWaBzYE

Thank you for any help given! I appreciate it.

Quick view of my code:
#dark-purple {
background-color: blueviolet;
z-index: 1;
}
#light-purple {
background-color: rgb(138 43 225/ 50%);
z-index: 2;
}
Your browser information:

User Agent is: Chrome/95.0.4638.69

Challenge: Build a Survey Form

[pmarwadi7]

You don’t need z-index to get a similar effect.
The best practice here would be
background: url() color
and background-blend-mode: multiply

[OneStew]

thank you, I appreciate it