Fake See-Through Backgrounds with CSS

Here’s a little bit of CSS to create a cool “see-through” effect, which is particularly fun when using fixed-position background images.

Try scrolling me!

[CodePen height=500 show=result href=EryCo user=mickeykay ]


This method utilizes the :after pseudo-element, which doesn’t work so well on inputs, but if you want to apply the same effect to form elements you can just create a lighter/translucent version of the same background image and apply it to the <input>‘s. Anybody have a way to do this without creating a second image? We’d love to hear about it.


Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.