![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS mask-repeat Property
![CSS mask-repeat Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-mask-repeat.webp)
Photo Credit to CodeToFun
π Introduction
The mask-repeat
property in CSS is used to define how a mask image is repeated (tiled) across an element.
This property allows you to control the repetition behavior of the mask image, which can enhance the visual presentation of your web elements.
Masking is commonly used to create complex shapes, gradients, and patterns by overlaying an image or graphic that determines the visibility of different parts of the element.
π‘ Syntax
The mask-repeat
property can accept one or two values, representing the horizontal and vertical repeat behavior, respectively.
element {
mask-repeat: value;
}
ποΈ Default Value
The default value of the mask-repeat
property is repeat, meaning the mask image will be tiled both horizontally and vertically by default.
π Property Values
Value | Description |
---|---|
repeat | Tiles the mask image horizontally and vertically. |
repeat-x | Tiles the mask image only horizontally. |
repeat-y | Tiles the mask image only vertically. |
no-repeat | The mask image is not tiled. |
space | Distributes the mask image without clipping, with extra space around the images. |
round | Scales and repeats the mask image to fit the element without clipping. |
π Example
In this example, we'll use a mask image and control its repetition using the mask-repeat
property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS mask-repeat Example</title>
<style>
.masked {
width: 300px;
height: 300px;
background: url('path-to-your-background-image.jpg');
mask-image: url('path-to-your-mask-image.png');
mask-repeat: repeat; /* You can change this to no-repeat, repeat-x, repeat-y, space, or round */
}
</style>
</head>
<body>
<h1>Element with Mask Image</h1>
<div class="masked"></div>
</body>
</html>
In this example, replace 'path-to-your-background-image.jpg' and 'path-to-your-mask-image.png' with the actual paths to your background and mask images.
π₯οΈ Browser Compatibility
The mask-repeat
property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, and Edge. It is recommended to check compatibility on different browsers and platforms to ensure consistent behavior across your user base.
π Conclusion
The mask-repeat
property is a versatile tool for web designers looking to create visually compelling effects using mask images.
By controlling the repetition of mask images, you can add depth and style to your web elements. Experiment with different values and combinations to achieve the desired visual effect on your website.
π¨βπ» Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS mask-repeat Property), please comment here. I will help you immediately.