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 can control its position behavior with “background-attachmentâ€.
Utilizing two images, we can pull off a pretty simple and fun CSS trick I’m calling the “blurry background effectâ€.
Related Submissions:
- 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...
- 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...
- jAni – jQuery Plugin for Cartoon-like Background Image Animation jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with...
- Mastering CSS background-position We will learn how to use the CSS property background-position to create different kind of buttons, interfaces and more by using only one image as...
- 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. ...