Having trouble with pseudo elements

Hello everybody,

I’m playing around with some pseudo elements to style a cool tile style website.
For my background I used a picture, on wich I applied a pseudo element to make a colored opaque layer over it.
The problem is that this layer doesn’t “follow” when I scroll. It just stops and I can see the “bare” background.

You can see this happening here : https://codepen.io/KeyMC/pen/qBmajNX?editors=1100
(you can see the whole CSS file over there)

Is there a way to make it “follow”, or act exactly like my background ? Or maybe is there a simpler way to make an opaque filter on the background ?

thank you in advance,
a newbie in distress.

I’m not exactly sure I understand what you are trying to do here but I’ll take my best guess. Don’t add a bottom margin on the container div. Right now you have the margins set as 15vh 0 which puts a margin of 15vh on both the top and bottom of the div and thus there is room below the div where the background image is expose. Set the margin to 15vh 0 0 to get rid of the bottom margin.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.