Répétition de fond CSS

CSS background-repeat

Par défaut,background-image L'attribut répète l'image dans les directions horizontale et verticale.

Certaines images ne devraient être répétées que dans une direction horizontale ou verticale, sinon elles sembleront étranges, comme montré ci-dessous :

Exemple

body {
  background-image: url("gradient_bg.png");
}

Essayez-le vous-même

Si l'image ci-dessus ne se répète qu'horizontalement (background-repeat: repeat-x;) rendra le fond plus joli :

Exemple

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Essayez-le vous-même

Avis :Pour répéter l'image verticalement, veuillez configurer background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat Cette propriété peut également spécifier que l'image de fond ne doit être affichée qu'une seule fois :

Exemple

Affichage de l'image de fond une seule fois :

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

Essayez-le vous-même

Dans cet exemple, l'image de fond est placée à la même position que le texte. Nous voulons changer la position de l'image pour éviter que l'image ne gêne trop le texte.

background-position CSS

background-position Cette propriété est utilisée pour spécifier la position de l'image de fond.

Exemple

Placer l'image de fond en haut à droite :

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Essayez-le vous-même