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.

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web