Répétition de l'image d'arrière-plan CSS
Répétition d'arrière-plan CSS
Par défaut, la background-image
propriété répète une image à la fois horizontalement et verticalement.
Certaines images doivent être répétées uniquement horizontalement ou verticalement, sinon elles auront l'air étrange, comme ceci :
Exemple
body
{
background-image: url("gradient_bg.png");
}
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;
}
Conseil : Pour répéter une image verticalement, réglezbackground-repeat: repeat-y;
Répétition d'arrière-plan CSS : pas de répétition
L'affichage de l'image d'arrière-plan une seule fois est également spécifié par la background-repeat
propriété :
Exemple
Afficher l'image d'arrière-plan 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 voulons changer la position de l'image, afin qu'elle ne perturbe pas trop le texte.
Position d'arrière-plan CSS
La background-position
propriété 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;
}