Grow your CSS skills. Land your dream job.

CSS Trick: Fade Out the Bottom of Pages with a Fixed Position Image

Published by Chris Coyier

I really like this subtle effect on the fortuito.us blog. the text at the bottom of the page fades away. Even as you scroll the page content up and down, it appears as if it fades away into the bottom of the page.

bottomfade1.png

This can be achieved with a transparent image that is in a fixed position on the page, like so:

#bottom_fade {
	z-index: 99;
	position: fixed;
	bottom: 0%;
	background-image: url("bottom-fade.png");
}

The high z-index helps insure it is the top-most layer.

bottomfade2.png

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

Comments

  1. Jayzon
    Permalink to comment#

    Looks really nice! For the last -tag, I added a class (name it as you want, I called it “last”), with margin-bottom: 150px (for a bottom-fade-height of 200px). With this margin, the last paragraph is displayed completely readable. Might help users to read ;-)

  2. @Jayzon: Great idea. That is a great way to go. Either that or add the big margin as padding the the page-wrapper.

  3. nev
    Permalink to comment#

    dead in Safari

  4. nev
    Permalink to comment#

    sorry – works in safari 3!

  5. Permalink to comment#

    I came up with a problem some days ago when I tried to get this nice effect done on my homepage. Since the png is laid over everything else, links are not accessible in the png-area. I don’t think that helps much for usability etc. ;-)

    Anyway, for pure text sites it’s a nice effect!

  6. @Jayzon: Yep, since it’s basically an image sitting right on top of the text, it won’t allow you to “click through” and get to those links. Perhaps a compromise could be to shorten up the fade so it really only covers one line or so.

  7. Really nice! Work in Internet Explorer!!!

  8. Lisa
    Permalink to comment#

    added a width of 100% and made the background repeat-x so that it doesn’t fall short on wider pages.

    Question though: in IE6, it just stays at the bottom of the page, not the bottom of whatever point you’re at. Is there a way to fix this?

  9. @Lisa – The whole idea isn’t very IE6 friendly at all. You will need to use an absolute positioning hack or some kind of javascript to get it to stay in place as well as a PNG hack to get the alpha transparency. I’d suggest just using an alternate stylesheet for IE 6 and below and not using this at all.

  10. jitendra
    Permalink to comment#

    i need this for IE 6 too plz tell me how

This comment thread is closed. If you have important information to share, you can always contact me.

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