Proprietà di stile sfondo

Definizione e uso

background Le proprietà possono essere impostate o restituite in forma abbreviata per massimo otto proprietà di sfondo singole.

Attraverso questa proprietà, puoi impostare/ritornare una o più delle seguenti opzioni (in qualsiasi ordine):

Proprietà DOM Proprietà CSS
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Questi attributi possono anche essere impostati utilizzando singoli attributi di stile. Si consiglia vivamente agli autori non esperti di utilizzare attributi singoli per ottenere una maggiore controllabilità.

Vedi anche:

Corso CSS3:Sfondo CSS

Corso CSS3:Sfondo CSS3

Manuale CSS:Attributo background

Esempio

Imposta lo stile dello sfondo del documento:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Prova tu stesso

Più esempi TIY in fondo alla pagina.

Sintassi

Restituisce l'attributo background:

object.style.background

Imposta l'attributo background:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Valore dell'attributo

Valore Descrizione
color Imposta il colore di sfondo dell'elemento.
image Imposta l'immagine di sfondo dell'elemento.
repeat Imposta il modo di ripetizione dell'immagine di sfondo.
attachment Imposta se l'immagine di sfondo è fissa o scorre con la pagina.
position Imposta la posizione iniziale dell'immagine di sfondo.
size Imposta la dimensione dell'immagine di sfondo.
origin Imposta l'area di posizionamento dello sfondo.
clip Imposta l'area di disegno dell'immagine di sfondo.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: transparent none repeat scroll 0% 0% auto padding-box border-box
Valore di ritorno: Stringa che rappresenta lo sfondo dell'elemento.
Versione CSS: CSS1 + nuove proprietà in CSS3

Altri esempi

Esempio 2

Modifica lo sfondo del elemento DIV:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Prova tu stesso

Esempio 3

Imposta il colore di sfondo del documento:

document.body.style.backgroundColor = "red";

Prova tu stesso

Esempio 4

Imposta l'immagine di sfondo del documento:

document.body.style.backgroundImage = "url('img_tree.png')";

Prova tu stesso

Esempio 5

Imposta l'immagine di sfondo come non ripetibile:

document.body.style.backgroundRepeat = "repeat-y";

Prova tu stesso

Esempio 6

Imposta l'immagine di sfondo come fissa (non scorrevole):

document.body.style.backgroundAttachment = "fixed";

Prova tu stesso

Esempio 7

Cambia la posizione dell'immagine di sfondo:

document.body.style.backgroundPosition = "top right";

Prova tu stesso

Esempio 8

Restituisce il valore dell'attributo di sfondo del documento:

document.body.style.background;

Prova tu stesso

Supporto del browser

background È una caratteristica di CSS1 (1996).

Tutti i browser lo supportano completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Supporto Supporto Supporto Supporto Supporto Supporto

Commenti

CSS3 (1999) ha aggiunto tre nuove proprietà: