background-position

Quando si lavora con le immagini di sfondo in CSS, uno degli aspetti più importanti è il loro posizionamento all’interno dell’elemento che le contiene. La proprietà background-position ci permette proprio di regolare l’allineamento orizzontale e verticale dell’immagine di sfondo.

Nell’esempio mostrato in figura, abbiamo un contenitore di classe .bg-example al cui interno viene applicata un’immagine di sfondo. Vedremo come impostare il codice e quali valori utilizzare per ottenere posizionamenti diversi (come left top, center center, 10% 80%, ecc.).

Il markup di base (HTML)

Per prima cosa, ipotizziamo di avere un semplice file HTML in cui inseriamo un contenitore che utilizzerà l’immagine di sfondo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <title>Background Position - Esempio</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="bg-example">
    <!-- Questo div avrà l’immagine di sfondo impostata via CSS -->
  </div>
  
</body>
</html>

Il file CSS (style.css)

Nel file style.css definiremo la classe .bg-example che conterrà tutte le regole per la gestione dell’immagine di sfondo:

.bg-example {
  background-image: url("/img/css/stella.jpg"); /* Percorso dell’immagine */
  background-repeat: no-repeat;                 /* Evita la ripetizione dell'immagine */
  background-position: left top;                /* Valore iniziale di esempio */
  height: 350px;                                /* Altezza fissa per mostrare l'immagine */
}

1. background-image

• Utilizziamo background-image per assegnare l’URL dell’immagine che vogliamo usare come sfondo.
• La sintassi è:

background-image: url("percorso/della/tua/immagine.jpg");

2. background-repeat

• Con background-repeat: no-repeat; l’immagine non viene ripetuta in orizzontale o in verticale.
• Se omettessimo questa proprietà, di default l’immagine verrebbe ripetuta a mosaico.

3. background-position

• Questa è la proprietà principale per il posizionamento.
• Accetta due valori (orizzontale e verticale), che possono essere:
  • Parole chiave: left, right, top, bottom, center.
  • Valori percentuali: 10% 80% (il primo valore si riferisce all’asse orizzontale, il secondo all’asse verticale).
  • Valori in unità fisse: ad esempio, 50px 100px.

Valori comuni

Nell’immagine di esempio sono mostrati questi valori:

• left top (sinistra in alto)
• left center (sinistra al centro verticale)
• left bottom (sinistra in basso)
• right top (destra in alto)
• right center (destra al centro verticale)
• right bottom (destra in basso)
• center top (centrato orizzontalmente in alto)
• center center (centrato orizzontalmente e verticalmente)
• center bottom (centrato orizzontalmente in basso)
• 10% 80% (posizionamento personalizzato: 10% dallo spigolo sinistro, 80% dallo spigolo superiore)

Esempi di codice:

/* Sinistra in alto */
.bg-example {
  background-image: url("/img/css/stella.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  height: 350px;
}

/* Destra al centro verticale */
.bg-example {
  background-image: url("/img/css/stella.jpg");
  background-repeat: no-repeat;
  background-position: right center;
  height: 350px;
}

/* Centra orizzontalmente e verticalmente */
.bg-example {
  background-image: url("/img/css/stella.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  height: 350px;
}

/* Valori percentuali personalizzati */
.bg-example {
  background-image: url("/img/css/stella.jpg");
  background-repeat: no-repeat;
  background-position: 10% 80%;
  height: 350px;
}

Naturalmente, non potrai scrivere tutte queste regole contemporaneamente per la stessa classe .bg-example; normalmente ne usi solo una a seconda del risultato che vuoi ottenere. In uno scenario reale, potresti creare diverse classi per ognuno di questi posizionamenti, oppure modificare il valore di background-position dinamicamente tramite JavaScript o con classi CSS alternative.

---

Spiegazione del posizionamento personalizzato

Prendiamo l’esempio background-position: 10% 80%;. Cosa significa?

• 10% indica che il punto di riferimento orizzontale dell’immagine di sfondo è spostato verso destra del 10% rispetto al contenitore.
• 80% indica che il punto di riferimento verticale dell’immagine di sfondo è spostato verso il basso dell’80% rispetto al contenitore.

In questo modo, hai un controllo più fine rispetto alle parole chiave come left, center o right.