Posizionamento del background

2.1 Proprietà background-position

La proprietà background-position in CSS viene utilizzata per specificare la posizione iniziale di un'immagine di background in un elemento. Questa proprietà permette di definire esattamente dove sarà posizionata l'immagine di background all'interno dell'elemento. background-position può essere usata per un fine-tuning della visualizzazione delle immagini di sfondo e per creare design più complessi.

Sintassi di background-position

La proprietà background-position accetta due valori che indicano la posizione orizzontale e verticale dell'immagine di background:

    
      background-position: posizione-orizzontale posizione-verticale;
    
  

Se viene specificato solo un valore, il secondo valore viene considerato di default come center.

Quali possono essere i valori per la posizione orizzontale e verticale:

• Parole chiave:
  • left: allineamento a sinistra
  • center: centrato
  • right: allineamento a destra
  • top: allineamento in alto
  • bottom: allineamento in basso
• Valori percentuali:
  • Per esempio, 50% 50% posiziona l'immagine al centro
  • I valori percentuali si riferiscono alle dimensioni dell'elemento, non dell'immagine
• Valori in pixel:
  • Per esempio, 10px 20px posiziona l'immagine a 10 pixel dal bordo sinistro e 20 pixel dal bordo superiore
• Combinazioni di valori:
  • È possibile combinare parole chiave e valori percentuali, ad esempio, left 50%

2.2 Parole chiave

Parole chiave:

• left, center, right: allineamento orizzontale
• top, center, bottom: allineamento verticale

Esempi di utilizzo delle parole chiave

L'immagine è posizionata nell'angolo in alto a sinistra:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* L'immagine è posizionata nell'angolo in alto a sinistra */
      }
    
  

L'immagine è posizionata al centro:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* L'immagine è posizionata al centro */
      }
    
  

L'immagine è posizionata nell'angolo in basso a destra:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* L'immagine è posizionata nell'angolo in basso a destra */
      }
    
  

2.3 Percentuali

I valori percentuali indicano la posizione dell'immagine rispetto alle dimensioni dell'elemento.

Esempi di utilizzo delle percentuali

L'immagine è posizionata al centro:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* L'immagine è posizionata al centro */
      }
    
  

L'immagine è posizionata nell'angolo in alto a sinistra:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* L'immagine è posizionata nell'angolo in alto a sinistra */
      }
    
  

L'immagine è posizionata nell'angolo in basso a destra:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* L'immagine è posizionata nell'angolo in basso a destra */
      }
    
  

2.4 Unità assolute (px, em, rem)

I valori in pixel o in altre unità assolute permettono un posizionamento preciso dell'immagine.

L'immagine è posizionata al centro:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* L'immagine è posizionata a 10 pixel a destra e 20 pixel in basso dall'angolo in alto a sinistra */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* L'immagine è posizionata a 2em a destra e 3em in basso */
      }
    
  

2.5 Combinazione di valori

Puoi combinare parole chiave e unità assolute per creare posizionamenti più precisi.

Combinazione di valori:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* L'immagine è posizionata a 20 pixel a destra e 10 pixel in basso dall'angolo in alto a sinistra */
      }