Proprietà CSS background-position-x
La proprietà CSS background-position-x specifica la posizione orizzontale di un background-image. Consulta la sintassi e pratica con esempi.
La proprietà background-position-x imposta la posizione orizzontale (asse x) di un'immagine di sfondo all'interno del suo elemento. È la controparte di background-position-y, che controlla la posizione verticale. Insieme compongono la versione longhand della proprietà shorthand background-position.
Per impostazione predefinita, un background-image è posizionato nell'angolo in alto a sinistra dell'elemento e, a meno che background-repeat non venga modificato, viene ripetuto su tutto l'elemento. Impostare background-position-x consente di spostare l'immagine a sinistra o a destra senza modificarne il posizionamento verticale.
Quando un elemento ha più di un'immagine di sfondo, è possibile assegnare a background-position-x un elenco separato da virgole — un valore per ogni livello, nello stesso ordine in cui le immagini sono elencate:
/* two background layers, each positioned independently on the x-axis */
background-position-x: left, 20%;Questa pagina tratta la sintassi, tutti i valori accettati, come vengono misurate le percentuali e le lunghezze, e fornisce esempi pratici che puoi eseguire.
Nota
Nel CSS moderno è di solito più chiaro utilizzare la proprietà shorthand
background-position, che imposta entrambi gli assi contemporaneamente.background-position-xè più utile quando si desidera animare o sovrascrivere solo l'asse orizzontale lasciando invariata la posizione verticale.
I valori negativi sono validi — background-position-x: -30px sposta l'immagine oltre il bordo sinistro.
| Valore iniziale | left |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.backgroundPositionX = "right"; |
Sintassi
Valori CSS di background-position-x
background-position-x: left | center | right | length | percentage | initial | inherit;Esempio della proprietà background-position-x:
Esempio di codice CSS background-position-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 70%;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Risultato
Esempio della proprietà background-position-x con il valore "center":
Esempio CSS background-position-x center
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-x;
background-position-x: center;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Esempio della proprietà background-position-x con il valore "left":
Esempio CSS background-position-x left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: left;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Esempio della proprietà background-position-x con il valore "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") repeat-y;
background-position-x: 30px;
}
</style>
</head>
<body>
<h2>Background-position-x property example</h2>
</body>
</html>Come vengono misurate le percentuali e le lunghezze
Una fonte comune di confusione è la differenza tra percentuali e lunghezze:
- Una lunghezza (
30px,2rem) sposta il bordo sinistro dell'immagine dal bordo sinistro dell'area di posizionamento di quella quantità. - Una percentuale allinea lo stesso punto relativo dell'immagine con lo stesso punto relativo dell'area. Quindi
0%allinea i bordi sinistri,100%allinea i bordi destri, e50%centra l'immagine. Ecco perché una percentuale maggiore di0%non sposta semplicemente l'immagine di "quella percentuale della larghezza" — interpola tra i due bordi.
Le parole chiave sono abbreviazioni di queste percentuali: left = 0%, center = 50%, e right = 100%.
Valori
| Valore | Descrizione |
|---|---|
| left | Specifica l'allineamento del bordo sinistro dell'immagine di sfondo con il bordo sinistro del livello di posizionamento dello sfondo. |
| center | Specifica l'allineamento del centro dell'immagine di sfondo con il centro del livello di posizionamento dello sfondo. |
| right | Specifica l'allineamento del bordo destro dell'immagine di sfondo con il bordo destro del livello di posizionamento dello sfondo. |
| length | Un offset fisso (ad esempio 30px o 2rem) del bordo sinistro dell'immagine dal bordo sinistro dell'area di posizionamento. Sono ammessi valori negativi e spostano l'immagine oltre il lato sinistro. |
| percentage | Specifica l'offset della posizione orizzontale dell'immagine di sfondo rispetto al contenitore. 0% allinea il bordo sinistro dell'immagine di sfondo con il bordo sinistro del contenitore, 100% allinea il bordo destro dell'immagine di sfondo con il bordo destro del contenitore, e 50% centra orizzontalmente l'immagine di sfondo. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |
Supporto dei browser
background-position-x è supportata in tutti i browser moderni, inclusi Chrome, Firefox, Safari ed Edge. È ampiamente disponibile, ma poiché è stata standardizzata più tardi rispetto alla proprietà shorthand background-position, preferisci la shorthand quando devi impostare entrambi gli assi e ricorri alla longhand solo quando vuoi controllare o animare specificamente l'asse orizzontale da solo.
Proprietà correlate
background-position— la proprietà shorthand che imposta entrambi gli assi contemporaneamente.background-position-y— la controparte verticale di questa proprietà.background-image— definisce l'immagine che viene posizionata.background-repeat— controlla se e come l'immagine viene ripetuta.