Exemple
Comment positionner un background-image:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété background-position définit la position de départ d'une image d'arrière-plan.
Tip: Par défaut, un background-image est placée dans le coin supérieur gauche d'un élément, et répété à la fois verticalement et horizontalement.
| Valeur par défaut: | 0% 0% |
|---|---|
| Hérité: | no |
| Animable: | yes. Read about animatable Try it |
| Version: | CSS1 |
| Syntaxe JavaScript: | object .style.backgroundPosition="center" 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-position | 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-position:value;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Si vous spécifiez un seul mot clé, l'autre valeur sera "center" | Joue-le " |
| x% y% | La première valeur correspond à la position horizontale et la seconde valeur correspond à la verticale. Le coin supérieur gauche est 0% 0%. Le coin inférieur droit est de 100% à 100%. Si vous spécifiez une seule valeur, l'autre valeur sera de 50%. . La valeur par défaut est: 0% 0% | Joue-le " |
| xpos ypos | La première valeur correspond à la position horizontale et la seconde valeur correspond à la verticale. Le coin supérieur gauche est 0 0. Les unités peuvent être des pixels (0px 0px) ou d'autres unités de CSS . Si vous spécifiez une seule valeur, l'autre valeur sera de 50%. Vous pouvez mélanger% et positions | 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 positionner un background-image en utilisant pour cent:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
Essayez - le vous - même » Exemple
Comment positionner un background-image en utilisant des pixels:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
Essayez - le vous - même » Pages associées
Tutoriel CSS: CSS Contexte
Référence CSS: la background-image property
Référence HTML DOM: backgroundPosition property