Background-position - Astuces CSS

Anonim

La background-positionpropriété en CSS vous permet de déplacer une image d'arrière-plan (ou un dégradé) dans son conteneur.

html ( background-position: 100px 5px; )

Il a trois types de valeurs différents:

  • Valeurs de longueur (par exemple 100px 5px)
  • Pourcentages (par exemple 100% 5%)
  • Mots-clés (par exemple top right)

Les valeurs par défaut sont 0 0. Cela place votre image d'arrière-plan en haut à gauche du conteneur.

Les valeurs de longueur sont assez simples: la première valeur est la position horizontale, la deuxième valeur est la position verticale. Donc 100px 5pxva déplacer l'image 100px vers la droite et cinq pixels vers le bas. Vous pouvez définir des valeurs de longueur dans px, emou dans l'une des autres valeurs de longueur CSS.

Les pourcentages fonctionnent un peu différemment. Sortez votre chapeau de maths: déplacer une image d'arrière-plan de X% signifie qu'il alignera le point X% de l'image sur le point X% dans le conteneur. Par exemple, 50%cela signifie qu'il alignera le milieu de l'image avec le milieu du conteneur. 100%signifie qu'il alignera le dernier pixel de l'image avec le dernier pixel du conteneur, et ainsi de suite.

Les mots clés ne sont que des raccourcis pour les pourcentages. C'est plus facile à retenir et à écrire top rightque 100% 0, et c'est pourquoi les mots-clés sont une chose. Voici une liste des cinq mots-clés et de leurs valeurs équivalentes:

  • top: 0% verticalement
  • right: 100% horizontalement
  • bottom: 100% verticalement
  • left: 0% horizontalement
  • center: 50% horizontalement si horizontal n'est pas déjà défini. Si c'est le cas, cela est appliqué verticalement.

Il est intéressant de noter que l'ordre que vous utilisez pour les mots-clés n'a pas d'importance: top centerc'est le même que center top. Cependant, vous ne pouvez le faire que si vous utilisez exclusivement des mots-clés. center 10%n'est pas la même chose que 10% center.

Démo

Cette démo montre des exemples d' background-positionensemble avec des unités de longueur, des pourcentages et des mots-clés.

Voir les valeurs de position d'arrière-plan du stylet par CSS-Tricks (@ css-tricks) sur CodePen.

Déclaration de valeurs

Vous pouvez donner background-positionjusqu'à quatre valeurs dans les navigateurs modernes (voir le tableau Prise en charge des navigateurs pour plus de détails).

Si vous déclarez une valeur , cette valeur est le décalage horizontal. Le navigateur définit le décalage vertical sur center.

Lorsque vous déclarez deux valeurs , la première valeur est le décalage horizontal et la deuxième valeur est le décalage vertical.

Les choses deviennent un peu plus délicates lorsque vous commencez à utiliser trois ou quatre valeurs, mais vous obtenez également plus de contrôle sur votre placement en arrière-plan.

Une syntaxe à trois ou quatre valeurs alterne entre les mots clés et les unités de longueur ou de pourcentage. Vous pouvez utiliser n'importe quelle valeur de mot clé, sauf centerdans une background-positiondéclaration à trois ou quatre valeurs .

Lorsque vous spécifiez trois valeurs , le navigateur interpète la quatrième valeur «manquante» sur 0. Voici un exemple de trois valeurs background-position:

#threevalues ( background-position: right 45px bottom; )

Cela positionne l'image d'arrière-plan à 45 px de la droite et à 0 px du bas du conteneur.

Voici un exemple de quatre valeurs background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Cela place l'image d'arrière-plan à 45px de la droite et 20px du bas du conteneur.

Notez l'ordre des valeurs dans les exemples ci-dessus: mots-clés suivis par des unités de longueur. Une valeur à trois ou quatre background-positiondoit suivre ce format, avec un mot-clé précédant une unité de longueur ou de pourcentage.

Démo

Cette démonstration comprend des exemples d'une valeur, deux valeurs, trois valeurs et quatre valeurs background-position.

Voir la syntaxe de valeur Pen background-position 1, 2, 3 et 4 par CSS-Tricks (@ css-tricks) sur CodePen.

En rapport

  • background-attachment
  • clip de fond
  • Couleur de l'arrière plan
  • image de fond
  • background-origin
  • Répétition du fond
  • taille de fond

Plus de ressources

  • background-position dans la spécification CSS3
  • background-position chez MDN
  • Images d'arrière-plan décalées

Prise en charge du navigateur

Les valeurs de base sont supportées partout. La syntaxe à quatre valeurs a ce support:

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
25 13 9 12 7

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 4.4 7,0-7,1

C'est le même niveau de support que les propriétés background-position-xet background-position-y.