CSS background-position-y
La proprietà CSS background-position-y (CSS3) controlla la posizione verticale dello sfondo
La proprietà background-position-y consente di determinare con precisione la posizione verticale dell'immagine di sfondo. È utile quando si vuole separare l'asse verticale da quello orizzontale, offrendo un maggiore controllo rispetto al classico shorthand background-position.
Sintassi
Significato dei valori principali:
top: Posiziona l'immagine di sfondo in alto rispetto al contenitore.
center: Centra l'immagine verticalmente.
bottom: Posiziona l'immagine in basso.
lunghezza: Valore come
50pxo1em, per un controllo preciso.percentuale: Percentuale dell’altezza del contenitore. Esempio:
75%.
Esempio proprietà: background-position-y
Codice Esempio: background-position-y
.background-pos-y {
width: 100%;
max-width: 600px;
height: 200px;
background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb');
background-repeat: no-repeat;
background-position-x: left;
background-position-y: center;
background-size: 150px;
border: 2px solid #1d3557;
border-radius: 10px;
background-color: #e0fbfc;
}
Contenuto Esempio: background-position-y
Esempio di utilizzo della proprietà background-position-y
In questo esempio, l'immagine di sfondo è posizionata verticalmente al centro del contenitore:
CSS e HTML per l’immagine centrata verticalmente:
<div class="background-pos-y"></div>
<style>
.background-pos-y {
width: 100%;
max-width: 600px;
height: 200px;
background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb');
background-repeat: no-repeat;
background-position-x: left;
background-position-y: center;
background-size: 150px;
border: 2px solid #1d3557;
border-radius: 10px;
background-color: #e0fbfc;
}
</style>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
