CSS Répétition de l'image d'arrière-plan
CSS background-repeat
Par défaut, la propriété background-image répète une image horizontalement et verticalement.
Certaines images doivent être répétées uniquement horizontalement ou verticalement, sinon elles auront un aspect étrange, comme ceci :
Si l'image ci-dessus est répétée uniquement horizontalement (background-repeat: repeat-x;), l'arrière-plan sera plus beau :
Exemple
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Try it Yourself »
Conseil : Pour répéter une image verticalement, définissez background-repeat: repeat-y;
CSS background-repeat: no-repeat
L'affichage de l'image d'arrière-plan une seule fois est également spécifié par la propriété background-repeat :
Exemple
Afficher l'image d'arrière-plan une seule fois :
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Try it Yourself »
Dans l'exemple ci-dessus, l'image d'arrière-plan est placée au même endroit que le texte. Nous souhaitons modifier la position de l'image afin qu'elle ne perturbe pas trop le texte.
CSS background-position
La propriété background-position est utilisée pour spécifier la position de l'image d'arrière-plan.
Exemple
Positionnez l'image d'arrière-plan dans le coin supérieur droit :
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Try it Yourself »
Propriétés de répétition et de position d'arrière-plan CSS
| Propriété | Description |
|---|---|
| background-position | Définit la position de départ d'une image d'arrière-plan |
| background-repeat | Définit la manière dont une image d'arrière-plan sera répétée |
CSS — Répétition et positionnement de l'arrière-plan — Vidéo W3Schools
Cette vidéo est une introduction à la répétition et à la position de l'arrière-plan en CSS.
Une partie d'une série de tutoriels vidéo pour apprendre CSS pour les débutants !
