Propriété CSS background-repeat

❮ Précédent Référence CSS complète Suivant ❯

Exemple

Répétez une image d'arrière-plan uniquement verticalement :

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

Plus d'exemples "Essayez-le vous-même" ci-dessous.

Définition et utilisation

La background-repeatpropriété définit si/comment une image d'arrière-plan sera répétée.

Par défaut, une image de fond est répétée à la fois verticalement et horizontalement.

Astuce : L'image d'arrière-plan est placée en fonction de la propriété background-position . Si aucune position d'arrière-plan n'est spécifiée, l'image est toujours placée dans le coin supérieur gauche de l'élément.

Valeur par défaut:	répéter
Hérité:	non
Animable :	non. En savoir plus sur l'animation
Version:	CSS1
Syntaxe JavaScript :	objet .style.backgroundRepeat="repeat-x"

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

Remarque : IE8 et les versions antérieures ne prennent pas en charge plusieurs images d'arrière-plan sur un élément.

Syntaxe CSS

Valeurs de propriété

Value	Description	Play it
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x	The background image is repeated only horizontally
repeat-y	The background image is repeated only vertically
no-repeat	The background-image is not repeated. The image will only be shown once
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round	The background-image is repeated and squished or stretched to fill the space (no gaps)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Plus d'exemples

Exemple

Répéter une image d'arrière-plan à la fois verticalement et horizontalement (c'est la valeur par défaut) :

body {
background-image: url("paper.gif");
background-repeat: repeat;
}

Exemple

Répéter une image d'arrière-plan uniquement horizontalement :

body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}

Exemple

Ne pas répéter une image d'arrière-plan. L'image ne s'affichera qu'une seule fois :

body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}

Exemple

Utilisation de background-repeat : space et background-repeat : round :

#example2 {
border: 2px solid black;
padding: 25px;
  background: url("w3css.gif");
background-repeat: space;
}

#example3 {
  border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
  background-repeat: round;
}

Exemple

Utilisez différentes propriétés d'arrière-plan pour créer une image "héro":

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}