Exemple
Répéter un background-image seulement verticalement:
body
{
background-image: url("paper.gif");
background-repeat: repeat-y;
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété background-repeat définit si / comment une image d'arrière-plan sera répété.
Par défaut, un background-image est répétée à la fois verticalement et horizontalement.
Tip: L'image de fond est placé en fonction de la propriété background-position. Si aucun background-position est spécifiée, l'image est toujours placé au coin supérieur gauche de l'élément.
| Valeur par défaut: | repeat |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object .style.backgroundRepeat="repeat-x" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 et antérieures ne supportent pas plusieurs images d'arrière - plan sur un seul élément.
Syntaxe CSS
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| repeat | L'image de fond sera répétée à la fois verticalement et horizontalement. Ceci est par défaut | Joue-le " |
| repeat-x | L'image de fond sera répétée seulement horizontalement | Joue-le " |
| repeat-y | L'image de fond sera répétée seulement verticalement | Joue-le " |
| no-repeat | Le background-image ne sera pas répétée | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Autres exemples
Exemple
Comment répéter une image de fond à la fois verticalement et horizontalement (par défaut pour les images d'arrière-plan):
body
{
background-image: url("paper.gif");
}
Essayez - le vous - même » Exemple
Répéter une image de fond seulement horizontalement:
body
{
background-image: url("paper.gif");
background-repeat: repeat-x;
}
Essayez - le vous - même » Exemple
Afficher une image d'arrière-plan une seule fois, sans-repeat:
body
{
background-image: url("paper.gif");
background-repeat: no-repeat;
}
Essayez - le vous - même » Pages associées
Tutoriel CSS: CSS Contexte
Référence CSS: la propriété background-position
Référence HTML DOM: backgroundRepeat property