Proprietà CSS di origine in background
Esempio
Lascia che l'immagine di sfondo inizi dall'angolo in alto a sinistra del contenuto:
#example1 {
border: 10px dashed black;
padding:
25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La background-originproprietà specifica la posizione di origine (l'area di posizionamento dello sfondo) di un'immagine di sfondo.
Nota: questa proprietà non ha effetto se l'allegato in background è "fisso".
| Valore di default: | imbottitura |
|---|---|
| Ereditato: | no |
| Animabile: | no. Leggi su animabile |
| Versione: | CSS3 |
| sintassi JavaScript: | oggetto .style.backgroundOrigin="content-box" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
| Property | |||||
|---|---|---|---|---|---|
| background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
Sintassi CSS
background-origin: padding-box|border-box|content-box|initial|inherit;
Valori di proprietà
| Value | Description | Play it |
|---|---|---|
| padding-box | Default value. The background image starts from the upper left corner of the padding edge | |
| border-box | The background image starts from the upper left corner of the border | |
| content-box | The background image starts from the upper left corner of the content | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Imposta due immagini di sfondo per un elemento <div>. Lascia che l'immagine di sfondo "paper.gif" inizi dall'angolo in alto a sinistra del bordo del riempimento e che l'immagine di sfondo "img_tree.gif" inizi dall'angolo in alto a sinistra del contenuto:
#example1 {
border: 10px dashed black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box, padding-box;
}
Pagine correlate
Tutorial CSS: sfondi CSS
Riferimento DOM HTML: proprietà backgroundOrigin