CSS background-origin
La proprietà CSS background-origin determina l'area di riferimento dello sfondo
La proprietà background-origin stabilisce da quale area dell'elemento venga misurata la posizione dello sfondo. È possibile scegliere tra tre opzioni: padding-box, che posiziona lo sfondo all'interno del padding; border-box, che include il bordo dell'elemento; e content-box, che limita lo sfondo all'area del contenuto, escludendo padding e bordo.
Sintassi
Significato dei valori principali:
-
padding-box: lo sfondo è posizionato a partire dal bordo del padding, escludendo il bordo dell'elemento.
-
border-box: lo sfondo è posizionato a partire dal bordo dell'elemento, inclusi i bordi.
-
content-box: lo sfondo è posizionato all'interno dell'area del contenuto, escludendo padding e bordo.
Esempio proprietà: background-origin
Codice Esempio: background-origin
.background-origin-example {
background-image: url('https://example.com/image.jpg');
background-origin: border-box;
background-size: cover;
padding: 50px;
color: white;
font-size: 22px;
text-align: center;
border: 10px solid #fff;
}
Contenuto Esempio: background-origin
Esempio di utilizzo di background-origin
In questo esempio, la proprietà background-origin è impostata su border-box per posizionare l'immagine di sfondo a partire dal bordo dell'elemento:
CSS e HTML per l'elemento con sfondo:
<style>
.background-origin-example {
width: 400px;
height: 150px;
background-image: url('https://example.com/image.jpg');
background-origin: border-box; /* L'immagine parte dal bordo dell'elemento */
background-size: cover;
padding: 50px;
color: white;
font-size: 22px;
text-align: center;
border: 10px solid red;
border-radius: 10px;
}
</style>
<div class="background-origin-example">
Sfondo con origin impostato su border-box
</div>
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.118
