Learn about the various options available for horizontal, vertical, and no-repeat behavior.
Introduction
The mask-repeat
CSS property controls how mask images are repeated within an element. It lets you decide if the image repeats along the horizontal axis, vertical axis, both, or not at all. By default, images are clipped to fit the element’s size, but you can also scale or distribute them evenly.
This feature became available in December 2023 and works well on the latest devices and browsers, though it might not function on older ones.
Description
The mask-repeat
property controls how mask images repeat within an element. You can specify repetition along the horizontal axis, vertical axis, both, or none at all. By default, images are clipped to fit the element, but you can scale them or distribute them evenly.
Syntax
The mask-repeat
property accepts one or more <repeat-style>
values, separated by commas.
One-value Syntax
repeat-x
: Equivalent torepeat no-repeat
repeat-y
: Equivalent tono-repeat repeat
repeat
: Equivalent torepeat repeat
space
: Equivalent tospace space
round
: Equivalent toround round
no-repeat
: Equivalent tono-repeat no-repeat
Two-value Syntax
The first value is for horizontal repetition, and the second is for vertical repetition.
Multiple Values
You can set different <repeat-style>
values for multiple mask images by separating them with commas.
Global Values
The property also accepts global values like inherit
, initial
, revert
, revert-layer
, and unset
.
Values
The mask-repeat
property accepts several values to control repetition:
One-value Syntax
Value | Description |
---|---|
repeat-x | The image repeats horizontally but not vertically. |
repeat-y | The image repeats vertically but not horizontally. |
repeat | The image repeats both horizontally and vertically. |
space | The image repeats without clipping, with whitespace evenly distributed. |
round | The image is stretched or compressed to fit the space without gaps. |
no-repeat | The image does not repeat. |
Two-value Syntax
Value | Horizontal Behavior | Vertical Behavior |
---|---|---|
repeat | The image repeats as much as needed to cover the width. The last image may be clipped if it doesn’t fit. | The image repeats as much as needed to cover the height. The last image may be clipped if it doesn’t fit. |
space | The image repeats without clipping, with whitespace evenly distributed. | The image repeats without clipping, with whitespace evenly distributed. |
round | The image is stretched or compressed to fit the space without gaps. | The image is stretched or compressed to fit the space without gaps. |
no-repeat | The image does not repeat. | The image does not repeat. |
Examples
Setting Repeat for a Single Mask
Example 1: Using repeat-x
Repeats a mask image horizontally.
Example 2: Using space repeat
Repeats the mask image horizontally with evenly distributed whitespace and vertically as much as needed.
Multiple Mask Image Support
Example 3: Using Multiple Mask Images
Sets different repeat styles for multiple mask images.
Formal Definition
- Initial Value:
repeat
- Applies To: All elements
- Inherited: No
- Computed Value: Two keywords (horizontal and vertical)
- Animation Type: Discrete
Formal Syntax
Browsers Supported
- Chrome 1
- Firefox 53
- Safari 15.4
- Opera 15
- Edge 79
- Internet Explorer (Not Supported)
By understanding these examples, you can effectively control the repetition of mask images, enhancing the visual appeal of your web pages.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.