CSS Répétition de l'image de fond
CSS background-repeat
La propriété background-repeat définit si et comment une image de fond sera répétée.
Par défaut, une image de fond est répétée à la fois verticalement et horizontalement.
Certaines images ne doivent être répétées qu'horizontalement ou verticalement, sinon elles auront un aspect étrange, comme ceci :
Exemple
body {
background-image: url("gradient_bg.png");
} CSS background-repeat Horizontalement
Si l'image ci-dessus est répétée uniquement horizontalement ( background-repeat: repeat-x; ), l'arrière-plan aura un meilleur aspect :
Exemple
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
} Astuce : Pour répéter une image uniquement verticalement, utilisez background-repeat: repeat-y;
CSS background-repeat: no-repeat
Afficher l'image de fond une seule fois est également spécifié par la propriété background-repeat :
Exemple
Afficher l'image de fond une seule fois :
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
} Dans l'exemple ci-dessus, l'image de fond est placée au même endroit que le texte. Nous souhaitons changer la position de l'image afin qu'elle ne dérange pas trop le texte.
CSS background-position
La propriété background-position est utilisée pour définir la position de départ de l'image de fond.
Par défaut, une image de fond est placée dans le coin supérieur gauche d'un élément.
Exemple
Positionner l'image de fond dans le coin supérieur droit :
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
} Les propriétés CSS Background Repeat et Position
| Propriété | Description |
|---|---|
| background-position | Définit la position de départ d'une image de fond |
| background-repeat | Définit comment une image de fond sera répétée |