Skip to content
Related Articles

Related Articles

CSS mask-repeat property

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Jul, 2022
View Discussion
Improve Article
Save Article

CSS mask-repeat sets how the mask images are placed after they have been sized and positioned. The mask image can be repeated along the vertical or horizontal or both the axes or not repeated.

Syntax:

mask-repeat: One-values
/* Or */
mask-repeat: Two-values
/* Or */
mask-repeat: Multiple values
/* Or */
mask-repeat: Global values

Property values: This property accepts values mentioned above and described below:

  • One-values: This property value refers to the values defined with units like space, round, repeat, repeat-x, repeat-y, no-repeat, etc.
  • Two-values: This property value refers to the values defined with units like repeat space, round space, repeat , etc.
  • Multiple values: This property value refers to the values defined with units like space round, no-repeat, etc.
  • Global values: This property value refers to the values defined with units like inherit, initial, unset, etc.

Example 1: Below example illustrates the mask-repeat property using one-values:

html




<!DOCTYPE html>
<html>
   
    <head>
        <style>
 
            .geeks{
                width: 40%;
                height:80px;
                background: green;
                -webkit-mask-image:
                url("image.svg");
                mask-repeat: repeat-x;       
            }
 
        </style>
    </head>
   
<body>
 
    <div class="geeks"></div>
 
</body>
 
</html>

Output:

Example 2: Below example illustrates the mask-repeat property using two-values:

html




<!DOCTYPE html>
<html>
 
    <head>
        <style>
 
            .geeks{
                width: 40%;
                height:80px;
                background: green;
                -webkit-mask-image:
                url("image.svg");
                mask-repeat: space repeat;       
            }
 
        </style>
    </head>
<body>
 
    <div class="geeks"></div>
 
</body>
 
</html>

Output:

Browsers Supported:

  • Chrome 1
  • Firefox 53
  • Safari 15.4
  • Opera 15
  • Edge 79
  • Internet Explorer (Not Supported).

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!