Question

I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.

Here is a fiddle of what I have, so far

JS FIDDLE

Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.

Answer 1

I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i’m correct in the assumption you do not want a solid background on the header because it would mess with your pages background….

you can use multiple backgrounds…

see your demo