Transparent Gradient Effect on Background Image

I built a new neat feature on my blog posts detail page that displays check constraints in the constructor instead of bean validation as a background image in the top of the rendered page. The trick to get the transparent fading effect via css is using a linear-gradient on top of the actual image.

It’s important to state that the linear-gradient effect is applied to the whole size of the block. So The block must have the exact same size as the background image to produce this effect. Check out the snippet below to get an idea how to do that.

See the Pen Background Image Fade Effect by Marcus Held (@Plumpy) on CodePen.

Update

Check out how I use this effect in the source code .