Skip to content
Related Articles

Related Articles

CSS mask-repeat property
  • Last Updated : 01 Oct, 2020

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 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Browsers Supported:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Edge
  • Internet Explorer (Not Supported).
My Personal Notes arrow_drop_up
Recommended Articles
Page :