Yuki

How to add color mask to the background image


This is one of useful CSS trick for a banner. You place a text over a image. And noticed… the text is kinda hard to read. Let’s add color mask to the background image, so the text are readable.

The HTML Markup

You can also add image as background image in the wrapper section.

The CSS

Set height to the image wrapper .banner and add below style.

You can also do gradient as well. Add gradient CSS to the .background-color.

*Generated by http://www.colorzilla.com/gradient-editor/

See it in CodePen

See the Pen How to add color mask to the background image by Yuki Rosene (@yukirosene) on CodePen.0