ELI5 (Explain Like I'm 5): Overlay and Relative Positioning?

[StrangeTech]

@boris

I want a gradient overlay of black and transparent over the image, so that the bottom of the image is almost completely black and the top is visible. I want the div inside with text to be fully visible of course and not affected by the background overlay.

Hi @boris, you may find this tip useful:

Add a background colour/gradient and a background image to the same block

Several times we have found ourselves implementing designs that have a background gradient and image on the same element, so I thought I would share a simple way to achieve this with Cwicly. As Cwicly doesn’t yet support multiple backgrounds, we have to find creative ways around this. This strategy works with any type of Cwicly container block (e.g. Section, Container, Div, etc). Steps: For your block, add a background image (presumably one with some transparent areas) Set the block’s p…

@boris

Would someone mind explaining the logic of relative positioning to a total CSS / HTML noob?

I don’t think relative positioning was your issue here - as @Marius pointed out, it was a z-index issue. If you use the tip I shared, this should solve your issue in a clean way.