oujood.com

Régler la position d'une image d'arrière-plan sur l'axe des x background-position-x ou|et sur l’axe des y background-position-y

La propriété background-position-x définit la position d'une image d'arrière-plan sur l'axe des x. La propriété background-position-y définit la position d'une image d'arrière-plan sur l'axe des y.

chercher |

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éfaut0%
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion43
4 -webkit-
1016
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.


Voir aussi nos tutoriel :

Balise details

Définit les détails supplémentaires que l'utilisateur peut afficher ou cacher

fonction parse_str, parse_str

Analyse une requête HTTP

fonction str_repeat,

R p te une chaîne