Sfondo di stile Proprietà
Esempio
Stile lo sfondo di un documento:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La proprietà di sfondo imposta o restituisce fino a otto proprietà di sfondo separate, in forma abbreviata.
Con questa proprietà, puoi impostare/restituire uno o più dei seguenti (in qualsiasi ordine):
- colore di sfondo
- immagine di sfondo
- sfondo ripetuto
- sfondo-allegato
- posizione di sfondo
- dimensione dello sfondo
- origine di fondo
- clip di sfondo
Le proprietà di cui sopra possono anche essere impostate con proprietà di stile separate. L'uso di proprietà separate è altamente raccomandato per gli autori non esperti per una migliore controllabilità.
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
Restituisce la proprietà di sfondo:
object.style.background
Imposta la proprietà di sfondo:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Valori di proprietà
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Dettagli tecnici
| Valore di default: | trasparente nessuno ripeti scorrimento 0% 0% auto padding-box border-box |
|---|---|
| Valore di ritorno: | Una stringa, che rappresenta lo sfondo di un elemento |
| Versione CSS | CSS1 + nuove proprietà in CSS3 |
Altri esempi
Esempio
Cambia lo sfondo di un elemento DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Esempio
Imposta un colore di sfondo per un documento:
document.body.style.backgroundColor = "red";
Esempio
Imposta un'immagine di sfondo per un documento:
document.body.style.backgroundImage = "url('img_tree.png')";
Esempio
Imposta un'immagine di sfondo su nessuna ripetizione:
document.body.style.backgroundRepeat = "repeat-y";
Esempio
Imposta l'immagine di sfondo da correggere (non scorrerà):
document.body.style.backgroundAttachment = "fixed";
Esempio
Cambia la posizione di un'immagine di sfondo:
document.body.style.backgroundPosition = "top right";
Esempio
Restituisce i valori delle proprietà di sfondo di un documento:
document.body.style.background;
Pagine correlate
Tutorial CSS: Sfondo CSS
Tutorial CSS3: sfondi CSS3
Riferimento CSS: proprietà di sfondo