OUJOOD.COM
Définition et utilisation da la propriété css background-position-x et background-position-y
La propriété CSS background-position-x sert à définir la position horizontale initiale de l'image d'arrière-plan, c'est-à-dire qu'elle est utilisée pour placer une image à une certaine position dans le sens horizontal.La propriété CSS background-position-y sert à définir la position verticale initiale de l'image d'arrière-plan, c'est-à-dire qu'elle est utilisée pour placer une image à une certaine position dans le sens vertical.
La position est relative à la couche de positionnement, qui peut être définie à l'aide de la propriété CSS background-origin. La Syntaxe CSS
background-position-x : valeur ; background-position-y : valeur ;
| Valeurs par défaut | 0% |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.backgroundPositionX="center" object.style.backgroundPositionY="center" |
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 43 4 -webkit- | 10 | 16 5 -moz- | 9 4 -webkit- | 30 15 -webkit- 12 -o- |
Exemple Le code suivant démontre l'image d'arrière plan montrant l'image au centre verticalement et à gauche horizontalement.
Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CSS background-position-y Property</title>
<style>
body {
background-position: center;
text-align: center;
background-image: url(" https://www.oujood.com/propriete-css/images/CSSTutoriel.png");
background-size: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: center;
background-position-x: left;
}
h1 {
color: green;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>www.oujood.com</h1>
<h3>
Propriétés CSS background-position-y et background-position-x
</h3>
</body>
</html>
Valeurs de la propriété css background-position-x
left (gauche)): Il est utilisé pour définir l'image à la position gauche.center (centre): Il est utilisé pour définir l'image à la position centrale horizontale.
right (droite)): Il est utilisé pour définir l'image dans la position droite.
nombre (longueur) : Il est utilisé pour définir l'image à la position horizontale de la longueur donnée en pixcel ou toute autre unité css.
pourcentage : Permet de définir l'image à la position horizontale en termes de pourcentage de hauteur.
initial : Il est utilisé pour définir sa valeur par défaut. Sa valeur par défaut est 0%.
inherit : Il hérite la valeur de cette propriété de ses éléments parents.
Valeurs de la propriété css background-position-y
top (haut)): Il est utilisé pour placer l'image en position haute.center (centre): Il est utilisé pour définir l'image à la position centrale verticale.
bottom (bas) : Il est utilisé pour définir l'image à la position inférieure.
nombre (longueur) : Permet de définir la position verticale de l'image à la longueur donnée. en pixcel ou toute autre unité css.
pourcentage : Permet de définir la position verticale de l'image en termes de pourcentage de hauteur.
initial : Il est utilisé pour définir sa valeur par défaut. Sa valeur par défaut est 0%.
inherit : Il hérite la valeur de cette propriété de ses éléments parents.