Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

CSS to Use an Image as a Mask

By Stephen Bucaro

People experienced in graphics design know that one way to make an image into a complex shape is to use a mask. A mask is an image with one color that is transparent, allowing an image behind it to show through, while a different color is used to block the parts of the image behind it. There are many ways to accomplish masking, but none more simple than using CSS (Cascading Style Sheets) to define an image to be used as a mask.

To use an image as a mask, first create a .png image and set the parts of the image that you want to block to transparent. Set the parts of the image that you want to show through to black. I know this sounds backwards, but that's the only way I've found it to work. The use the CSS mask-image property to define the image as the mask.

I need to explain at this point that the CSS mask-image property works only in newer versions of the Google Chrome browser, and only the -webkit-mask-image version works. So at some point in the future things may change, especially since you're supposed to be able to use the mask-type property to set which color is opaque and which is transparent. But I'm not explaining the specification here, instead I'm giving you examples that work.

The example above (which you can see if you're using the Google Chrome browser, is created using the simple line of code shown below:

<img src="sunrise.jpg" style="-webkit-mask-image: url(mask.png);" />

Note that it is an html img tag that loads the image "sunrise.jpg" and then sets the img elment's style to define "mask.png" as the mask. Very nice text created with an image. Shown below is mask.png.

text created with image mask

Shown below, we have set the background of the mask to black and the text part of the mask to white.

This example is created using the simple line of code shown below:

<img src="riparion.jpg" style="-webkit-mask-image: url(phoenix.png);" />

Note that it is an html img tag that loads the image "riparion.jpg" and then sets the img element's style to define "phoenix.png" as the mask. Very nice text on an image background. Shown below is phoenix.png.

Image backgrownd mask

I've found that the only color text you can get is white because any color other than transparent causes that area of the mask to be transparent, even white.