Proprietà CSS background-position

La proprietà CSS background-position imposta la posizione iniziale di un background-image all'interno del suo elemento. Controlla dove l'immagine è ancorata — ad esempio, in un angolo, centrata, oppure spostata di una distanza fissa rispetto a un bordo.

Questa pagina tratta la sintassi con parole chiave, percentuali e lunghezze, l'importante differenza tra come vengono misurate percentuali e lunghezze, gli offset relativi ai bordi (sintassi a quattro valori), il posizionamento di più immagini di sfondo e gli errori più comuni.

Per impostazione predefinita il valore è 0% 0%, che posiziona l'immagine nell'angolo in alto a sinistra dell'elemento. Se lo sfondo è impostato su repeat, si ripete a partire da quel punto di ancoraggio sia orizzontalmente che verticalmente.

Valore iniziale	0% 0%
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter e ::first-line.
Ereditata	No.
Animabile	Sì. La posizione può essere modificata.
Versione	CSS1
Sintassi DOM	object.style.backgroundPosition = "center";

Sintassi

Sintassi della proprietà CSS background-position

background-position: value;

È possibile fornire uno o due valori:

/* One value — the second axis defaults to center */
background-position: right;        /* same as: right center */

/* Two values — horizontal first, then vertical */
background-position: left top;
background-position: 50% 25%;
background-position: 20px 100px;

/* Four values — offset from a named edge */
background-position: right 20px bottom 10px;

Percentuali vs. lunghezze

Questo è il dettaglio che crea più confusione. Una percentuale allinea lo stesso punto percentuale dell'immagine con quel punto del contenitore, mentre una lunghezza (px, em, ecc.) misura lo spazio tra gli angoli in alto a sinistra.

background-position: 100% 100% posiziona l'angolo in basso a destra dell'immagine contro l'angolo in basso a destra del contenitore — l'intera immagine rimane visibile.
background-position: 50% 50% (equivalente a center center) centra l'immagine indipendentemente dalla sua dimensione.
background-position: 20px 0 sposta semplicemente l'immagine di 20px a destra dell'angolo in alto a sinistra; l'offset è indipendente dalla dimensione dell'immagine.

Le percentuali sono quindi ideali per "ancorare a un bordo o centrare" mentre le lunghezze sono ideali per "spostarla di una quantità fissa."

Esempio della proprietà background-position:

Esempio della proprietà CSS background-position con valore predefinito

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 102px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: left top;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned at the left-top corner of the element.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà background-position specificata in percentuale:

Esempio della proprietà CSS background-position con % (percentuale)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 50% 15%;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>
      The background-image is positioned 50% from the left side and 15% from the top side of the element.
    </p>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà background-position in pixel:

Esempio della proprietà CSS background-position con px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: 5px 50px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>
      The background-image is positioned 5px from the left, and 50px down from the top.
    </p>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà background-position con il valore "right 100px":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right 100px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned 100px from the right edge, vertically centered.</p>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà background-position con il valore "center center":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 102px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: center center;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned center.</p>
  </body>
</html>

Provalo tu stesso »

Offset da un bordo specifico

La sintassi a tre e quattro valori consente di spostare l'immagine rispetto a un bordo nominato invece che dall'angolo in alto a sinistra. Ogni lunghezza segue la parola chiave che indica il bordo da cui viene misurata:

/* 30px in from the right edge, 10px down from the top edge */
background-position: right 30px top 10px;

Questo è molto più chiaro che cercare di esprimere la stessa cosa con le percentuali, e mantiene l'offset costante anche se il contenitore viene ridimensionato. È supportato da tutti i browser moderni (e da Internet Explorer 9 in poi).

Posizionamento di più immagini di sfondo

Quando un elemento ha più immagini di sfondo, fornire a ciascuna la propria posizione in un elenco separato da virgole. L'ordine delle posizioni corrisponde all'ordine delle immagini:

.banner {
  background-image: url("logo.png"), url("pattern.png");
  background-repeat: no-repeat, repeat;
  background-position: right top, left top;
}

Qui il logo si trova nell'angolo in alto a destra mentre il pattern ripetuto inizia in alto a sinistra.

Errori comuni

Ordine degli assi sbagliato. Il primo valore è sempre orizzontale, il secondo verticale — background-position: 30px 80px significa 30px da sinistra, non dall'alto.
Dimenticare background-repeat: no-repeat. Se l'immagine si ripete, la posizione imposta solo dove inizia il primo riquadro, quindi l'effetto è spesso invisibile.
Confondere percentuali e lunghezze. 50% centra l'immagine; 50px è un offset fisso dall'angolo (vedi la sezione precedente).
Mescolare unità in una singola coppia di valori va bene — background-position: center 20px è valido e utile.

Proprietà correlate

background-image — imposta l'immagine da posizionare.
background-repeat — controlla la ripetizione, che interagisce con il punto di ancoraggio.
background-size — il ridimensionamento dell'immagine modifica il modo in cui si risolvono le posizioni in percentuale.
background-attachment — se l'immagine scorre con la pagina o rimane fissa.
background-color — il colore di fallback mostrato dove l'immagine non copre.

Valori

Valore	Descrizione	Provalo
`left`, `center`, `right`, `top`, `bottom`	Imposta la posizione del background-image. Se viene impostato un solo valore, l'altro assume come predefinito `center`.	Provalo »
`x% y%`	Il primo valore imposta la posizione orizzontale e il secondo quella verticale. `0% 0%` è l'angolo in alto a sinistra. `100% 100%` è l'angolo in basso a destra. Se viene impostato un solo valore, l'altro assume come predefinito `50%`.	Provalo »
`xpos ypos`	Il primo valore imposta la posizione orizzontale e il secondo quella verticale. Le unità possono essere pixel (ad es., `0px 0px`).	Provalo »
`initial`	Imposta la proprietà al suo valore predefinito.	Provalo »
`inherit`	Eredita la proprietà dal suo elemento padre.

Pratica

Quali parametri possono essere usati nella proprietà CSS background-position per specificare la posizione dell'immagine di sfondo?

PercentualePixelRemParole chiave (top, bottom, left, right, center)Valori di colore (hex, rgba, ecc.)