CSS Masking - mask-repeat Property

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."

By default, images are clipped to the element's size, but they can be scaled with round or evenly distributed with space.

Possible Values

  • repeat-x − The mask image will be repeated horizontally within the element.

  • repeat-y − The mask image will be repeated vertically within the element.

  • repeat − The mask image will be repeated both horizontally and 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.

Applies to

All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements.

Syntax

One-value Syntax

mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

Two-value syntax: horizontal | vertical

mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

Following table shows the one-value syntax and its equivalent two-value syntax for the mask-repeat property.

Single value Two-value equivalent
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat

CSS mask-repeat - repeat-x

The following example demonstrates that the -webkit-mask-repeat: repeat-x property repeats the mask image horizontally within the element −

<html>
<head>
<style>
   .mask-container {
      height: 250px;
      width: 350px;
      background: pink;
   }
   .repeated-image {
      height: 220px;
      width: 330px;
      padding: 10px;
      background-image: url('images/red-flower.jpg');
      background-size: cover;
      background-repeat: no-repeat;

      -webkit-mask-image: url('images/shop.png');
      -webkit-mask-size: 100px;
      -webkit-mask-repeat: repeat-x;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container">
      <div class="repeated-image"></div>
   </div>
</body>
</html>

CSS mask-repeat - repeat-y

The following example demonstrates that the -webkit-mask-repeat: repeat-y property repeats the mask image vertically within the element −

<html>
<head>
<style>
   .mask-container {
      height:350px;
      width: 320px;
      background: pink;
   }
   .repeated-image {
      height: 330px;
      width: 300px;
      padding: 10px;
      background-image: url('images/red-flower.jpg');
      background-size: cover;
      background-repeat: no-repeat;

      -webkit-mask-image: url('images/shop.png');
      -webkit-mask-size: 100px;
      -webkit-mask-repeat: repeat-y;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container">
      <div class="repeated-image"></div>
   </div>
</body>
</html>

CSS mask-repeat - repeat

The following example demonstrates that the -webkit-mask-repeat: repeat property repeats the mask image in both the directions, i.e., horizontally and vertically within the element −

<html>
<head>
<style>
   .mask-container {
      height:350px;
      width: 320px;
      background: pink;
   }
   .repeated-image {
      height: 330px;
      width: 300px;
      padding: 10px;
      background-image: url('images/red-flower.jpg');
      background-size: cover;
      background-repeat: no-repeat;

      -webkit-mask-image: url('images/shop.png');
      -webkit-mask-size: 100px;
      -webkit-mask-repeat: repeat;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container">
      <div class="repeated-image"></div>
   </div>
</body>
</html>

CSS mask-repeat - space

The following example demonstrates that the -webkit-mask-repeat: space property repeats the mask image with spaces between each repetition without clipping −

<html>
<head>
<style>
   .mask-container {
      height:350px;
      width: 320px;
      background: pink;
   }
   .repeated-image {
      height: 330px;
      width: 300px;
      padding: 10px;
      background-image: url('images/red-flower.jpg');
      background-size: cover;
      background-repeat: no-repeat;

      -webkit-mask-image: url('images/shop.png');
      -webkit-mask-size: 100px;
      -webkit-mask-repeat: space;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container">
      <div class="repeated-image"></div>
   </div>
</body>
</html>

CSS mask-repeat - round

The following example demonstrates that the -webkit-mask-repeat: round property repeats the mask image to cover the entire element area, the last image may be clipped if required −

<html>
<head>
<style>
   .mask-container {
      height:350px;
      width: 320px;
      background: pink;
   }
   .repeated-image {
      height: 330px;
      width: 300px;
      padding: 10px;
      background-image: url('images/red-flower.jpg');
      background-size: cover;
      background-repeat: no-repeat;

      -webkit-mask-image: url('images/shop.png');
      -webkit-mask-size: 100px;
      -webkit-mask-repeat: round;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container">
      <div class="repeated-image"></div>
   </div>
</body>
</html>

CSS mask-repeat - no-repeat

The following example demonstrates that -webkit-mask-repeat: no-repeat property prevents the mask image from repeating −

<html>
<head>
<style>
   .mask-container {
      height:350px;
      width: 320px;
      background: pink;
   }
   .repeated-image {
      height: 330px;
      width: 300px;
      padding: 10px;
      background-image: url('images/red-flower.jpg');
      background-size: cover;
      background-repeat: no-repeat;

      -webkit-mask-image: url('images/shop.png');
      -webkit-mask-size: 100px;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container">
      <div class="repeated-image"></div>
   </div>
</body>
</html>

CSS mask-repeat - Two Value Syntax

The following example demonstrates that -webkit-mask-repeat: repeat space property repeats the mask image with spaces −

<html>
<head>
<style>
   .mask-container {
      height: 250px;
      width: 350px;
      background: pink;
   }
   .repeated-image {
      height: 220px;
      width: 330px;
      padding: 10px;
      background-image: url('images/red-flower.jpg');
      background-size: cover;
      background-repeat: no-repeat;

      -webkit-mask-image: url('images/shop.png');
      -webkit-mask-size: 100px;
      -webkit-mask-repeat: repeat space;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container">
      <div class="repeated-image"></div>
   </div>
</body>
</html>

CSS mask-repeat - Multiple Mask Images

The following example demonstrates that the -webkit-mask-repeat property repeats the shop mask image horizontally and heart mask image vertically to cover the entire element area −

<html>
<head>
<style>
   .mask-container {
      height: 350px;
      width: 320px;
      background: pink;
   }
   .repeated-image {
      height: 330px;
      width: 300px;
      padding: 10px;
      background-image: url('images/red-flower.jpg');
      background-size: cover;
      background-repeat: no-repeat;

      -webkit-mask-image: url('images/shop.png'), url('images/heart.png');
      -webkit-mask-size: 100px;
      -webkit-mask-repeat: repeat-x, repeat-y;
      -webkit-mask-position: center;
   }
</style>
</head>
<body>
   <div class="mask-container">
      <div class="repeated-image"></div>
   </div>
</body>
</html>
Advertisements