I have an angular website like this:

But when I scroll up, the text intersects with the navbar:

I would like to have each line of text disappear as soon as it is closer than 4rem from the top. The text that is more than 4rem from the top shold still be readable.

My idea was to use a transparent div that matches the position and size of the nav bar an has the background photo and has a z-index lower than the nav bar, but higher than the text. But how do you make the photo align in this div?

Can you give me a hint how to achieve this?