background-repeat |
Répète l'arrière-plan |
|---|---|
| CSS |
Syntaxe
|
background-repeat: paramètres; |
Paramètres
| Paramètre | Description | |
|---|---|---|
| paramètres | Ce paramètre de propriété permet d'indiquer le type de répétition : | |
| Valeur | Description | |
| no-repeat | Cet attribut permet d'indiquer qu'il n'y a pas de répétition de l'image d'arrière-plan. | |
| repeat | Cet attribut permet d'indiquer qu'il a une répétition de l'image d'arrière-plan dans le sens horizontal et vertical. | |
| repeat-x | Cet attribut permet d'indiquer qu'il a une répétition de l'image d'arrière-plan dans le sens horizontal. | |
| repeat-y | Cet attribut permet d'indiquer qu'il a une répétition de l'image d'arrière-plan dans le sens vertical. | |
| round | Cet attribut permet d'indiquer que l'image est redimensionnée pour se répéter et couvrir tout l'espace disponible, avec des ajustements de taille pour que l'image s'adapte parfaitement sans être coupée. Disponible à partir de CSS3. | |
| space | Cet attribut permet d'indiquer que l'image de fond se répète, mais l'espace entre chaque répétition est calculé pour que l'image couvre l'intégralité de l'élément sans dépasser. Disponible à partir de CSS3. | |
Description
Cette propriété permet de fixer effet de répétition de l'arrière-plan.
Remarques
- Contrôle de la répétition de l'image de fond : La propriété background-repeat détermine si l'image de fond doit être répétée (tessellée) ou non. Par défaut, l'image de fond se répète à la fois horizontalement et verticalement pour remplir l'espace disponible dans l'élément. Cependant, cette propriété permet de contrôler cette répétition pour créer des effets visuels spécifiques.
- Utilisation avec des images de fond petites : L'option repeat est particulièrement utile lorsqu'une image de fond est petite, comme des motifs ou des textures. Cette propriété permet de créer des motifs continus pour remplir tout l'arrière-plan d'un élément, ce qui est couramment utilisé pour les arrière-plans décoratifs des pages Web.
- Effets visuels avancés avec space et round : Les valeurs space et round offrent des solutions plus avancées pour la répétition d'images de fond. space garantit que l'espace entre les répétitions est uniforme, tandis que round permet d'ajuster la taille de l'image pour couvrir l'ensemble de l'élément, ce qui peut être utile pour des effets de texture ou des arrière-plans fluides.
- Comportement avec des images de fond plus grandes : Lorsque l'image de fond est plus grande que l'élément, il est souvent plus logique d'utiliser no-repeat pour empêcher la répétition de l'image. Cela permet de garantir que l'image occupe une seule fois l'arrière-plan sans chevauchement ou redondance visuelle.
- Positionnement avec background-position : L'utilisation de background-repeat peut être combinée avec background-position pour obtenir des effets encore plus intéressants. Par exemple, vous pouvez utiliser background-repeat: no-repeat; avec background-position: center; pour afficher une seule image de fond centrée dans l'élément.
- Compatibilité avec les arrière-plans multiples : Lors de l'utilisation de plusieurs images de fond, chaque image peut être contrôlée indépendamment avec background-repeat. Par exemple, background-repeat: repeat, no-repeat; permet de répéter la première image de fond et de ne pas répéter la deuxième image de fond. Cela est utile pour des compositions d'arrière-plans complexes.
- Impact sur la performance et l'accessibilité : Les images de fond répétées peuvent avoir un impact sur la performance, notamment lorsque de grandes images sont utilisées dans un grand nombre d'éléments. Les arrière-plans répétés doivent être optimisés pour garantir des temps de chargement rapides. De plus, les arrière-plans répétitifs peuvent parfois être difficiles à lire ou à percevoir correctement pour les personnes ayant des déficiences visuelles, il est donc important de tester l'accessibilité visuelle de ces arrière-plans.
Dernière mise à jour : Dimanche, le 20 décembre 2015