Scrolling Background Effect Explained
The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.
Related Submissions:
- CSS Trick For a Scrolling Transparent Background Effect Learn an easy CSS trick to create a transparent scrolling background effect like that found on the Think Geek website, including fixes for IE6. ...
- Blurry Background Effect When setting a background image on a page element with CSS, you can control its position with “background-positionâ€, but an often-forgotten trick is that you...
- Double Body Background CSS Trick So, you just created this awesome fancy background for a website. The top part of the background is large and in charge, while everything below...
- Scalable Content Box Using Only One Background Image A colleague of mine was recently trying to cut down on image usage when working on a web design project. He asked me whether it...
- Achieving Double Background Effect with CSS We all know our current CSS version cannot handle double backgrounds. Hopefully in the future this will be available so we don’t have to pull...