Positionnement de l'arrière-plan

2.1 Propriété background-position

La propriété background-position en CSS est utilisée pour définir la position initiale de l'image d'arrière-plan dans un élément. Cette propriété permet de déterminer précisément où l'image de fond sera placée à l'intérieur de l'élément. background-position peut être utilisée pour ajuster finement l'affichage des images d'arrière-plan et créer des designs plus complexes.

Syntaxe de background-position

La propriété background-position accepte deux valeurs qui indiquent la position horizontale et verticale de l'image d'arrière-plan :

    
      background-position: position-horizontale position-verticale;
    
  

Si une seule valeur est spécifiée, la seconde valeur est par défaut considérée comme étant center.

Quelles peuvent être les valeurs de position horizontale et verticale :

• Mots-clés :
  • left : alignement à gauche
  • center : centrage
  • right : alignement à droite
  • top : alignement en haut
  • bottom : alignement en bas
• Valeurs en pourcentages :
  • Par exemple, 50% 50% positionne l'image au centre
  • Les valeurs en pourcentages se réfèrent aux dimensions de l'élément, pas de l'image
• Valeurs en pixels :
  • Par exemple, 10px 20px positionne l'image à 10 pixels du bord gauche et 20 pixels du bord supérieur
• Combinaisons de valeurs :
  • On peut combiner des mots-clés et des valeurs en pourcentages, par exemple, left 50%

2.2 Mots-clés

Mots-clés :

• left, center, right : alignement horizontal
• top, center, bottom : alignement vertical

Exemples d'utilisation des mots-clés

L'image est positionnée dans le coin supérieur gauche :

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* L'image est positionnée dans le coin supérieur gauche */
      }
    
  

L'image est positionnée au centre :

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* L'image est positionnée au centre */
      }
    
  

L'image est positionnée dans le coin inférieur droit :

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* L'image est positionnée dans le coin inférieur droit */
      }
    
  

2.3 Pourcentages

Les valeurs en pourcentages indiquent la position de l'image par rapport aux dimensions de l'élément.

Exemples d'utilisation des pourcentages

L'image est positionnée au centre :

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* L'image est positionnée au centre */
      }
    
  

L'image est positionnée dans le coin supérieur gauche :

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* L'image est positionnée dans le coin supérieur gauche */
      }
    
  

L'image est positionnée dans le coin inférieur droit :

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* L'image est positionnée dans le coin inférieur droit */
      }
    
  

2.4 Unités absolues (px, em, rem)

Les valeurs en pixels ou autres unités absolues permettent de positionner précisément l'image.

L'image est positionnée au centre :

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* L'image est positionnée à 10 pixels à droite et 20 pixels en bas du coin supérieur gauche */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* L'image est positionnée à 2em à droite et 3em en bas */
      }
    
  

2.5 Combinaison de valeurs

Tu peux combiner des mots-clés et des unités absolues pour créer un positionnement plus précis.

Combinaison de valeurs :

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* L'image est positionnée à 20 pixels à droite et 10 pixels en bas du coin supérieur gauche */
      }