CSS Mask Image Examples : Image & Video Background

In this guide, we will be covering some CSS mask-image examples. By the end of this article, you will know how to use all the common attributes of CSS mask image like:

What We Will Be Making (Working Demos)

Image Mask Over Background Image

See the Pen
CSS Mask Image by Khoj Badami (@livefiredev)
on CodePen.

Image Mask Over Background Video

(Note: The video takes a bit to load. So, give it some time)

See the Pen
CSS Mask Image Video by Khoj Badami (@livefiredev)
on CodePen.

Example Of How To Use CSS Mask Image Over An Image

Step 1: Set Up The Background Image

The idea here is simple:

1. Make a DIV
2. Load and IMG in it
3. Set the width and height of the div to match the size of the image mask
4. If you need to, you can also position the image using margin etc place it behind the image mask (optional)

Step 2: Set Up A SVG/PNG Mask On Top Of The Background Image

Now, to the image_mask class, we are going to add the following CSS rules..

.image_mask {
    /* SVG Image To Use As The Mask */
    -webkit-mask-image: url(/logo.png);
    mask-image: url(/logo.png);
  
    /* Should The Mask Be Tiled & Repeated Or Not?  */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  
    /* What should the position of the mask be over the underlying
    image */
    -webkit-mask-position: center;
    mask-position: center;
  
    /* How much area does the mask cover */
    -webkit-mask-size: 100%;
    mask-size: 100%;
    
    /* Some Usual CSS */
    width: 500px;
    height: 150px;
    overflow: hidden;
}

Let us try to understand all the rules one by one with an example of each.

CSS mask-image Rule & Example

With the “mask-image” rule, we have to provide an SVG or PNG image. 

For example, for the above mask, the image is…

The completely black areas will allow whatever is below through. The areas that are fully white/transparent will not allow anything, though.

CSS mask-repeat Rule

This one is easy to understand. You can make the mask repeat or not repeat.

Above, the demo has: mask-repeat: no-repeat

Below is a mask-repeat CSS example.

In the demo below, the mask-repeat property has been removed.

See the Pen
CSS mask-repeat Rule by Khoj Badami (@livefiredev)
on CodePen.

In the above case, the file used for the image mask is…

CSS mask-size Rule Example

This rule is also simple to understand. You can set a size value in any unit. The mask image is scaled to that size. For example, here is a sample…

-webkit-mask-size: 100px;
mask-size: 100px;

And the result of this, is that the above mask is scaled down to 100px width to give something like…

See the Pen
mask-size Rule by Khoj Badami (@livefiredev)
on CodePen.

Example Of How To Use CSS Mask Image Over A Video

Step 1: Set Up The Background Video

We are just going to set up a DIV with a <video> tag and some CSS properties. See below the working example…

See the Pen
Video Block Without CSS Image Mask by Khoj Badami (@livefiredev)
on CodePen.

You have to note how the <video> tag is set up. Without controls with the video looping etc. Below is the HTML. Note the “loop muted autoplay”

<video width="320" height="180" loop muted autoplay>
  <source src="https://livefiredev.com/wp-content/uploads/2022/09/size_reduced_fire_bg_video.mp4" type="video/mp4">
</video>

On the CSS side, we are just placing the video in the DIV. Clipping the overflow and placing the video so that we get the right part in the background.

Step 2: Set Up A SVG Mask On Top Of The Background Video

Finally, we are ready to use the CSS properties we learned about above to get the desired effect.

Here it is once again…

See the Pen
CSS Mask Image Video by Khoj Badami (@livefiredev)
on CodePen.

How Well Supported Is This Thing?

Well, you can check that out, by looking at the current chart on CanIUse.

Or you can check the browser compatibility section on MDN.

Basically, as of now (Sep 19th 2022), the “-webkit-” prefix is required. However, it works well on all browsers.

Hope you found this useful!