Propriété background-repeat CSS
- Page précédente background-position-y
- Page suivante background-size
Définition et utilisation
background-repeat
Définit si et comment l'image de fond doit être répétée.
Par défaut, l'image de fond est répétée à la fois horizontalement et verticalement.
Explication détaillée
La propriété background-repeat définit le mode de tiling de l'image.
Commence par l'image originale, l'image originale étant background-image Définition et application background-position Placement des valeurs.
Voir également :
Tutoriel CSS :Arrière-plan CSS
Manuel de référence CSS :Attribut background-position
Manuel de référence HTML DOM :Attribut backgroundRepeat
Exemple
body { background-image: url(stars.gif); background-repeat: repeat-y; }
Astuces et commentaires
Astuce :La position de l'image de fond est définie par la propriété background-position. Si la propriété background-position n'est pas spécifiée, l'image sera placée dans le coin supérieur gauche de l'élément.
Syntaxe CSS
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|hérité;
Valeur de l'attribut
Valeur de l'attribut
Valeur | Description |
---|---|
repeat | Par défaut. L'image de fond sera répétée à la fois verticalement et horizontalement. |
repeat-x | L'image de fond sera répétée horizontalement. |
repeat-y | L'image de fond sera répétée verticalement. |
no-repeat | L'image de fond ne sera affichée qu'une seule fois. |
hérité | Définit que la propriété background-repeat doit être héritée de l'élément parent. |
Détails techniques
Valeur par défaut : | repeat |
---|---|
Héritabilité : | non |
Version : | CSS1 |
Syntaxe JavaScript : | objet.style.backgroundRepeat="repeat-y" |
Plus d'exemples
- Comment répéter l'image de fond verticalement
- Cet exemple montre comment répéter l'image de fond verticalement.
- Comment répéter l'image de fond horizontalement
- Cet exemple montre comment répeter l'image de fond horizontalement.
- Comment afficher une image de fond une seule fois
- Cet exemple montre comment afficher une image de fond une seule fois.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.
Chrome | Edge | Firefox | Safari | Opéra |
---|---|---|---|---|
Chrome | IE / Edge | Firefox | Safari | Opéra |
1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- Page précédente background-position-y
- Page suivante background-size