Grow your CSS skills. Land your dream job.

Overflow-y and transparent heading – driving me crazy, need help!

  • # April 12, 2013 at 1:55 pm

    Okay, I’m relatively new to CSS, and I’d love it if you kind people could help me with something. I’ve got a heading on a page. It’s just a word as a title, and I’ve set the background to transparent and fixed. When I scroll down the page, I’d like the other words to stop at the heading and become invisible, except it doesn’t do so… they just scroll on past my heading like the little bullies they are.

    I’ve tried setting the z-index, overflow, positioning… Argh! So if someone could tell me how I could get it to fade away at around 10% of the top of the page that would be fantastic!

    # April 12, 2013 at 1:57 pm

    Give the header a background color that’s the same as the body for the “transparent” look, but will overlap the content when scrolling.

    # April 12, 2013 at 1:59 pm

    I don’t think I can because I have the background as an image, rather than a solid colour…

    # April 12, 2013 at 2:05 pm

    Actually, I used your idea but added the background image again as the heading image and attached a fixed position to it. Thanks a lot! :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".