Maîtriser la propriété CSS mask-repeat pour contrôler la répétition des masques

La Propriété CSS mask-repeat : Définition complète et contexte d'utilisation

La propriété CSS mask-repeat constitue un élément fondamental du système de masquage CSS qui permet de contrôler précisément la façon dont une image de masque se répète à l'intérieur d'un élément HTML. Cette propriété fonctionne en étroite collaboration avec mask-image pour créer des effets visuels sophistiqués en définissant non seulement quelle image utiliser comme masque, mais également comment cette image doit être distribuée dans l'espace disponible de l'élément cible.

Dans le contexte du design web moderne, la maîtrise de mask-repeat vous permet de créer des motifs répétitifs complexes, des transitions visuelles élégantes et des effets de transparence contrôlés. Cette propriété est particulièrement utile pour les designers qui souhaitent appliquer des textures personnalisées, des dégradés de transparence répétés ou des patterns géométriques sans alourdir le DOM avec de multiples éléments.

Syntaxe générale et structure de la propriété mask-repeat

La syntaxe de la propriété mask-repeat en CSS3 suit une structure claire et flexible qui accepte une ou deux valeurs pour contrôler séparément les axes horizontal et vertical. Voici la syntaxe complète avec toutes les valeurs possibles :

/* Syntaxe avec une valeur (s'applique aux deux axes) */
mask-repeat: repeat | repeat-x | repeat-y | space | round | no-repeat;

/* Syntaxe avec deux valeurs (horizontal puis vertical) */
mask-repeat: repeat space;
mask-repeat: round no-repeat;

/* Valeurs globales */
mask-repeat: initial | inherit | unset;

Valeurs possibles et comportements détaillés de mask-repeat

La propriété mask-repeat offre un éventail de valeurs permettant un contrôle granulaire sur la répétition des masques. Chaque valeur produit un comportement distinct adapté à des cas d'usage spécifiques :

• repeat : La valeur par défaut qui provoque la répétition du motif de masque dans les deux directions (horizontale et verticale). L'image est dupliquée en mosaïque jusqu'à remplir complètement la zone de l'élément, même si cela signifie que certaines copies seront tronquées sur les bords
• repeat-x : Active la répétition horizontale uniquement du masque le long de l'axe X. Cette valeur est idéale pour créer des bordures supérieures/inférieures ou des bandes horizontales décoratives avec effet de masque
• repeat-y : Déclenche la répétition verticale exclusive le long de l'axe Y. Parfait pour les barres latérales, les colonnes décoratives ou les effets de transition verticaux avec masquage progressif
• space : Distribue intelligemment les copies de l'image de masque en ajoutant des espaces uniformes entre chaque répétition. Les images ne sont jamais rognées et l'espacement est calculé automatiquement pour optimiser la distribution sans déformation
• round : Ajuste dynamiquement la taille de l'image de masque pour qu'un nombre entier de répétitions s'adapte parfaitement à la zone disponible. Cette valeur évite le rognage en redimensionnant légèrement chaque copie du masque pour un rendu harmonieux
• no-repeat : Désactive complètement la répétition, affichant une seule instance du masque positionnée selon la propriété mask-position. Essentiel pour les masques uniques ou les effets de transparence localisés
• initial : Réinitialise la propriété à sa valeur par défaut (repeat), annulant toute déclaration précédente dans la cascade CSS
• inherit : Force l'élément à hériter la valeur mask-repeat de son parent, utile pour maintenir la cohérence visuelle dans une hiérarchie d'éléments masqués

Exemples pratiques et cas d'usage de mask-repeat

Exemple 1 : Répétition horizontale pour créer un effet de bande

Cet exemple démontre comment utiliser repeat-x pour créer une bande décorative horizontale avec un effet de masque. Cette technique est couramment utilisée pour les en-têtes, pieds de page ou séparateurs de sections :

Exemple :    📋 Copier le code

#element-bande-horizontale {
  width: 100%;
  height: 150px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  /* Définit l'image PNG avec transparence comme masque */
  mask-image: url(motif-decoratif.png);
  /* Répète le masque uniquement sur l'axe horizontal */
  mask-repeat: repeat-x;
  /* Contrôle la taille du masque répété */
  mask-size: 200px 100%;
}

Exemple 2 : Utilisation de space pour une distribution équilibrée

La valeur space est particulièrement efficace pour créer des grilles de masques avec espacement automatique, garantissant que chaque copie du masque reste intacte sans rognage :

Exemple :    📋 Copier le code

.conteneur-grille-masque {
  width: 800px;
  height: 600px;
  background: url(image-arriere-plan.jpg) center/cover;
  /* Applique un masque circulaire ou géométrique */
  mask-image: url(cercle-masque.svg);
  /* Distribution intelligente avec espacement automatique */
  mask-repeat: space;
  /* Définit la taille de chaque instance du masque */
  mask-size: 100px 100px;
  /* Centre le motif dans le conteneur */
  mask-position: center;
}

Exemple 3 : Combinaison de valeurs pour contrôle bidirectionnel

CSS permet de spécifier deux valeurs distinctes pour mask-repeat, la première contrôlant l'axe X (horizontal) et la seconde l'axe Y (vertical). Cette technique offre un contrôle asymétrique précis :

Exemple :    📋 Copier le code

.element-masque-asymetrique {
  width: 600px;
  height: 400px;
  background: #3498db;
  /* Image de masque avec dégradé ou motif */
  mask-image: url(degrade-texture.png);
  /* Première valeur : répétition horizontale */
  /* Seconde valeur : aucune répétition verticale */
  mask-repeat: repeat no-repeat;
  /* Ajuste les dimensions du masque appliqué */
  mask-size: 150px 100%;
}

Conseils avancés et bonnes pratiques pour mask-repeat

• La propriété mask-repeat ne produit aucun effet visuel si vous n'avez pas préalablement défini une image de masque valide via mask-image. Assurez-vous toujours que votre image source est correctement chargée et accessible
• Choisissez la valeur appropriée selon votre objectif créatif : utilisez repeat pour les textures en mosaïque, space pour les grilles régulières, round pour éviter les coupures disgracieuses, et no-repeat pour les masques uniques positionnés stratégiquement
• La répétition extensive de masques complexes peut impacter les performances, particulièrement sur les appareils mobiles. Pour les images de masque de grande taille ou haute résolution, envisagez d'optimiser vos fichiers PNG/SVG ou de limiter la zone masquée
• Combinez mask-repeat avec mask-size pour un contrôle optimal. Par exemple, mask-size: 50% 50% avec mask-repeat: space crée une grille de 2x2 avec espacement automatique
• Pour assurer la compatibilité avec les navigateurs WebKit, utilisez systématiquement le préfixe -webkit- en complément de la propriété standard : -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
• Testez toujours vos effets de masque répété sur différentes résolutions d'écran. Les valeurs space et round produisent des résultats adaptatifs qui peuvent varier selon les dimensions du viewport
• Utilisez des images de masque avec canaux alpha optimisés (PNG-8 ou SVG) pour réduire le poids des fichiers tout en maintenant la qualité de transparence nécessaire aux effets de masquage

Spécifications techniques et compatibilité navigateurs

Prise en charge de mask-repeat dans les navigateurs modernes

Les numéros figurant dans le tableau indiquent la première version du navigateur prenant totalement en charge la propriété mask-repeat. Les numéros suivis de -webkit- indiquent que la fonctionnalité nécessite un préfixe propriétaire pour fonctionner.

Navigateur
Version minimale	4.0 -webkit-	79.0 -webkit-	53.0	3.1 -webkit-	15.0 -webkit-

Exemple complet : Comparaison visuelle entre no-repeat et repeat

Cet exemple HTML complet illustre la différence comportementale entre no-repeat et repeat appliqués à des conteneurs identiques. Vous pouvez observer comment la répétition affecte le rendu final du masque :

Exemple :    📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Démonstration CSS mask-repeat : comparaison no-repeat vs repeat</title>
  
<style>
/* Style pour le premier conteneur avec masque non répété */
.masque-unique {
  width: 600px;
  height: 400px;
  /* Fond vert pour visualiser l'effet du masque */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 20px solid #e74c3c;
  padding: 50px;
  margin-bottom: 40px;
  /* Préfixe webkit pour Safari et anciens Chrome */
  -webkit-mask-image: url(images/LOGOmASK.png);
  /* Propriété standard pour Firefox et navigateurs modernes */
  mask-image: url(images/LOGOmASK.png);
  /* Réduit le masque à 50% de la taille du conteneur */
  -webkit-mask-size: 50%;
  mask-size: 50%;
  /* Désactive la répétition : une seule instance visible */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Centre le masque dans le conteneur */
  -webkit-mask-position: center;
  mask-position: center;
}

/* Style pour le second conteneur avec masque répété */
.masque-mosaique {
  width: 600px;
  height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 20px solid #e74c3c;
  padding: 50px;
  /* Même image de masque que le premier exemple */
  -webkit-mask-image: url(images/LOGOmASK.png);
  mask-image: url(images/LOGOmASK.png);
  /* Taille identique pour faciliter la comparaison */
  -webkit-mask-size: 50%;
  mask-size: 50%;
  /* Active la répétition en mosaïque sur les deux axes */
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

/* Style commun pour les images contenues */
.masque-unique img,
.masque-mosaique img {
  display: block;
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>

<h1>Comparaison des comportements de la propriété CSS mask-repeat</h1>

<h3>Configuration 1 : mask-repeat avec valeur no-repeat</h3>
<p>Le masque apparaît une seule fois, centré dans le conteneur sans aucune répétition.</p>
<div class="masque-unique">
  <img src="images/village.png" alt="Paysage de village pittoresque" width="600" height="400">
</div>

<h3>Configuration 2 : mask-repeat avec valeur repeat</h3>
<p>Le masque se répète en mosaïque sur toute la surface, créant un motif continu.</p>
<div class="masque-mosaique">
  <img src="images/village.png" alt="Paysage de village pittoresque" width="600" height="400">
</div>

</body>
</html>

Par carabde | Mis à jour le 18 novembre 2025