Question

I have no idea how to go about this:

I have a full-screen background image, a navigation bar with 50% transparency fixed to the top, and content below it. How can I have the navigation bar maintain transparency over the background image, and still have scrolling content?

The issue right now is that when I scroll down, the content goes under the navigation bar, and shows through the transparency, which obviously looks awful.

Basically, I want the content of the page to scroll and disappear at the bottom of the navigation bar. I know I could make the navigation bar opaque and use a background image for that too, but I’d rather just have the one full-screen background image.

Thoughts?

Answer 1

Put the contents in a block (div) that has fixed size, say stretch it to the whole page except the size of the navigation bar. Then make that div scrollable with css property overflow:scroll