All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

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

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed