Sfondo CSS Proprietà
Esempio
Imposta diverse proprietà di sfondo in una dichiarazione:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
Definizione e utilizzo
La backgroundproprietà è una proprietà abbreviata per:
- colore di sfondo
- immagine di sfondo
- posizione di sfondo
- dimensione dello sfondo
- sfondo ripetuto
- origine di fondo
- clip di sfondo
- sfondo-allegato
Non importa se manca uno dei valori sopra, ad esempio background:#ff0000 url(smiley.gif); È permesso.
| Valore di default: | vedi singole proprietà |
|---|---|
| Ereditato: | no |
| Animabile: | sì, vedere le singole proprietà . Leggi su animabile |
| Versione: | CSS1 + nuove proprietà in CSS3 |
| sintassi JavaScript: | oggetto .style.background="red url(smiley.gif) in alto a sinistra no-repeat" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Nota: vedere il supporto del singolo browser per ogni valore di seguito.
Sintassi CSS
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Nota: se una delle proprietà nella dichiarazione abbreviata è la proprietà bg-size, è necessario utilizzare un / (barra) per separarla dalla proprietà bg-position, ad esempio background:url(smiley.gif) 10px 20px/50px 50px ; risulterà in un'immagine di sfondo, posizionata a 10 pixel da sinistra, 20 pixel dall'alto e la dimensione dell'immagine sarà di 50 pixel di larghezza e 50 pixel di altezza.
Nota: se si utilizzano più origini immagine di sfondo ma si desidera anche un colore di sfondo, il parametro colore di sfondo deve essere l'ultimo nell'elenco.
Valori di proprietà
| Value | Description | CSS |
|---|---|---|
| background-color | Specifies the background color to be used | 1 |
| background-image | Specifies ONE or MORE background images to be used | 1 |
| background-position | Specifies the position of the background images | 1 |
| background-size | Specifies the size of the background images | 3 |
| background-repeat | Specifies how to repeat the background images | 1 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-clip | Specifies the painting area of the background images | 3 |
| background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
| initial | Sets this property to its default value. Read about initial | 3 |
| inherit | Inherits this property from its parent element. Read about inherit | 2 |
Pagine correlate
Tutorial CSS: CSS Background , CSS Backgrounds (avanzato)
Riferimento HTML DOM: proprietà in background