Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS mask-repeat Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
πŸ‘οΈ 9 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
CSS mask-repeat Property

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.

Syntax
Copied
Copy To Clipboard
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

ValueDescription
repeatTiles the mask image horizontally and vertically.
repeat-xTiles the mask image only horizontally.
repeat-yTiles the mask image only vertically.
no-repeatThe mask image is not tiled.
spaceDistributes the mask image without clipping, with extra space around the images.
roundScales 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.

index.html
Copied
Copy To Clipboard
<!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:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

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

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy