CSS - mask-repeat Property

Quiz

CSS mask-repeat property in CSS is used to define how a mask image should be repeated or tiled within an element. This property works in conjunction with the mask-image property, which specifies the image used as the mask. It allows for repetition of an image horizontally, vertically, along both axes, or not at all.

Syntax

mask-repeat: repeat | repeat-x | repeat-y | space | round | no-repeat | initial | inherit;

Property Values

Value	Description
repeat	The mask image will be repeated both horizontally and vertically within the element.
repeat-x	The mask image will be repeated horizontally within the element.
repeat-y	The mask image will be repeated vertically within the element.
space	The mask image should be repeated as much as possible without clipping, and any extra space will be divided equally between the repeated images.
round	The mask image should be repeated within an element, and the repeated images will be stretched to fit the available space without being clipped.
no-repeat	The mask image will not be repeated.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Mode Repeat Property

The following examples explain the mode-repeat property with different values.

Mask Repeat Property with Repeat X Value

To have the mask image repeated along the horizontal direction, we use the repeat-x value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 100px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 40%;
         mask-repeat: repeat-x;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: repeat-x
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

Mask Repeat Property with Repeat Y Value

To have the mask image repeated along the vertical direction, we use the repeat-y value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 250px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 90%;
         mask-repeat: repeat-y;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: repeat-y
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

Mask Repeat Property with Repeat Value

To have the mask image repeated along both the horizontal and vertical directions, we use the repeat value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 200px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 50%;
         mask-repeat: repeat;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: repeat
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

Mask Repeat Property with Space Value

To allow the mask image to be repeated as much as possible without clipping and extra space is divided equally between the repeated images, we use the space value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 200px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 50%;
         mask-repeat: space;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: space
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

Mask Repeat Property with Round Value

To have the mask image be repeated within an element such that it is stretched to fit the available space without being clipped, we use the round value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 200px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 50%;
         mask-repeat: round;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: round
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>

   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

Mask Repeat Property with No Repeat Value

To not have any repetition of mask image in any direction, we use the no-repeat value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 10px dashed red;
         width: 450px;
         padding: 10px;
      }

      .repeated-image {
         border: 2px solid black;
         height: 200px;
         width: 400px;
         padding: 10px;
         background-image: url('/css/images/content.png');
         background-size: cover;
         background-repeat: no-repeat;

         -webkit-mask-image: url('/css/images/logo.png');
         mask-image: url('/css/images/logo.png');
         mask-size: 70%;
         mask-repeat: no-repeat;
         mask-position: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS mask-repeat property
   </h2>
   <h4>
      mask-repeat: no-repeat
   </h4>
   <div class="container">
      <div class="repeated-image">
      </div>
   </div>
   
   <h4>
      image used:
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=200 height=150>
</body>

</html>

Supported Browsers

Property
mask-repeat	120	120	53	15.4	106

css_reference.htm

Print Page