Proprietà CSS background-position-y
La proprietà CSS background-position-y specifica la posizione verticale di un'immagine di sfondo. Vedi esempi e provali tu stesso.
La proprietà CSS background-position-y imposta la posizione verticale di un'immagine di sfondo all'interno del suo elemento. Rappresenta la metà verticale della proprietà abbreviata background-position: mentre background-position accetta sia un valore orizzontale che uno verticale, background-position-y controlla esclusivamente il posizionamento su/giù, lasciando il posizionamento sinistra/destra a background-position-x.
Si ricorre a questa proprietà quando si desidera spostare verticalmente un'immagine di sfondo senza ridichiarare il valore orizzontale — ad esempio, per ancorare una filigrana al fondo di una sezione hero, o per regolare con precisione il punto di partenza di un motivo. Quando un elemento ha più immagini di sfondo, è possibile assegnare un valore per ogni livello, separati da virgole, e ciascun valore corrisponde all'immagine relativa.
L'offset verticale viene misurato rispetto all'area di posizionamento dello sfondo (per impostazione predefinita il padding box dell'elemento). Una lunghezza viene calcolata dal bordo superiore verso il basso; una percentuale allinea i punti corrispondenti sull'immagine e sull'area (vedere Valori di seguito).
I valori negativi sono validi — background-position-y: -20px sposta l'immagine verso l'alto, oltre il bordo superiore.
| Valore iniziale | top |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.backgroundPositionY = "bottom"; |
Sintassi
Valori di CSS background-position-y
background-position-y: top | center | bottom | length | percentage | initial | inherit;Esempio della proprietà background-position-y con il valore "top":
Esempio di codice CSS background-position-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: top;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Risultato
Esempio della proprietà background-position-y con il valore "bottom":
Esempio CSS background-position-y bottom
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: bottom;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Esempio della proprietà background-position-y con il valore "center":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: center;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Esempio della proprietà background-position-y con il valore "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: 90px;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Esempio della proprietà background-position-y con il valore "percentage":
I valori percentuali si comportano diversamente dalle lunghezze. Con una lunghezza come 90px, il bordo superiore dell'immagine viene posizionato 90px sotto il bordo superiore dell'area. Con una percentuale, il punto a N% dall'alto dell'immagine viene allineato con il punto a N% dall'alto dell'area — quindi 0% corrisponde a top, 100% a bottom e 50% a center. Questo è ciò che permette ai valori percentuali di mantenere visibile un'immagine sovradimensionata indipendentemente dall'altezza del contenitore.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: 70%;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| top | Specifica l'allineamento del bordo superiore dell'immagine di sfondo con il bordo superiore 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. |
| bottom | Specifica l'allineamento del bordo inferiore dell'immagine di sfondo con il fondo del livello di posizionamento dello sfondo. |
| length | Specifica l'offset verticale dell'immagine di sfondo dal bordo superiore del livello di posizionamento dello sfondo. |
| percentage | Specifica l'offset verticale dell'immagine di sfondo rispetto al contenitore. 0% allinea il bordo superiore dell'immagine di sfondo con il bordo superiore del contenitore, 100% allinea il bordo inferiore con il bordo inferiore del contenitore, e 50% centra verticalmente l'immagine di sfondo. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
background-position— imposta la posizione orizzontale e verticale insieme in un'unica dichiarazione.background-position-x— la controparte orizzontale di questa proprietà.- Proprietà CSS3 — panoramica delle proprietà introdotte in CSS3.