Can i make text disapear when it goes under the nav

[Dindon]

So i have a nav which is fixed and also has no background-color so it take the image under it but obviously when i scroll down the text pass throught the nav and we see it, so i was wondering if i could do that when it pass under the nav it doesn’t show up

https://codepen.io/Dindon/pen/EEBwjG

[Beverleyh]

So i have a nav which is fixed and also has no background-color

You’ve answered your own question. Give it a background-color so that you can’t see text pass through it.

[Dindon]

Yeah the problem is that i want the nav to have the background-image color.

[Mamun]

If you use background: #color url(image.jpg); then the color will be overlapped by the image and you will only see the image if the image is large enough to fill up the entire space. Otherwise it will show the background color and the image above that color. It might solve your problem.

[Beverleyh]

i want the nav to have the background-image color.

We can’t see the image in order to comment. If you correct the path/put the full path in so that it loads in the pen, we can comment further.

That said, try sampling a colour from the image and apply that to the nav background, or, apply the same image to the nav and adjust the background-position to make it sit seamlessly together across both elements. It’s hard to say though until we can see what image you’re working with.

[Paulie_D]

Added complexity I suspect in that each section will presumably have a different image…

Pretty sure this isn’t an easy fix.

[Dindon]

I wasn’t enable to put it in the codepen so here is the link of the image :

https://cdn.pixabay.com/photo/2017/10/30/16/38/music-2902891_1280.jpg

I can’t take a sample of the image cause it’s shaded, i tried to easy way so this is why i was wondering if it was possible.

Thank you

[Beverleyh]

Only getting a black & white “no hotlinking” pic…

But if you can take and upload a screen cap (or whatever it is you tried to do) I don’t see why you can’t include the correct/original image in your pen.

[janet4now]

Is this what you were looking for?

http://jsfiddle.net/8SUmn/3/

[Author]

Posts