CSS background-position-x
La proprietà CSS background-position-x (CSS3) controlla la posizione orizzontale dello sfondo
La proprietà background-position-x consente di determinare con precisione la posizione orizzontale dell'immagine di sfondo. È particolarmente utile quando si desidera controllare separatamente le direzioni orizzontale (x) e verticale (y) rispetto al classico shorthand background-position.
Sintassi
Significato dei valori principali:
left: Posiziona lo sfondo sul lato sinistro del contenitore.
center: Centra l'immagine orizzontalmente.
right: Allinea lo sfondo al lato destro.
lunghezza: Valore in
px,em, ecc. Esempio:50px.percentuale: Percentuale rispetto alla larghezza del contenitore. Esempio:
75%.
Esempio proprietà: background-position-x
Codice Esempio: background-position-x
.background-pos-x {
width: 100%;
max-width: 600px;
height: 200px;
background-image: url('https://images.unsplash.com/photo-1527766833261-b09c3163a791');
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
background-size: 150px;
border: 2px solid #1d3557;
border-radius: 10px;
background-color: #f1faee;
}
Contenuto Esempio: background-position-x
Esempio di utilizzo della proprietà background-position-x
In questo esempio, l'immagine di sfondo è posizionata orizzontalmente al centro del contenitore:
CSS e HTML per l’immagine centrata orizzontalmente:
<div class="background-pos-x"></div>
<style>
.background-pos-x {
width: 100%;
max-width: 600px;
height: 200px;
background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb');
background-repeat: no-repeat;
background-position-x: center;
background-position-y: top;
background-size: 150px;
border: 2px solid #1d3557;
border-radius: 10px;
background-color: #f1faee;
}
</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
