CSS Stenografia di base


Esempio

La proprietà background può essere utilizzata per impostare una o più proprietà correlate allo sfondo:

Valore Descrizione CSS Ver.
background-image Immagine di sfondo da utilizzare 1+
background-color Colore di sfondo da applicare 1+
background-position Posizione dell'immagine di sfondo 1+
background-size Dimensioni dell'immagine di sfondo 3+
background-repeat Come ripetere l'immagine di sfondo 1+
background-origin Come viene posizionato lo sfondo (ignorato quando è fixed background-attachment ) 3+
background-clip Come viene dipinto lo sfondo rispetto al content-box del content-box border-box o al padding-box 3+
background-attachment Come si comporta l'immagine di sfondo, se scorre insieme al relativo blocco contenitore o ha una posizione fissa all'interno del viewport 1+
initial Imposta la proprietà su valore come predefinito 3+
inherit Eredita il valore della proprietà da padre 2+

L'ordine dei valori non ha importanza e ogni valore è facoltativo

Sintassi

La sintassi della dichiarazione abbreviata di sfondo è:

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

Esempi

background: red;

Semplicemente impostando un background-color con il valore red .

background: border-box red;

Impostazione di un background-clip di background-color un riquadro di background-color e un background-color di background-color rosso.

background: no-repeat center url("somepng.jpg");

Imposta una background-repeat non ripetizione, background-origin al centro e un'immagine background-image un'immagine.

background: url('pattern.png') green;

In questo esempio, il background-color di background-color dell'elemento sarebbe impostato su green con pattern.png , se disponibile, sovrapposto al colore, ripetendo tutte le volte necessarie per riempire l'elemento. Se pattern.png include qualsiasi trasparenza, il colore green sarà visibile dietro di esso.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

In questo esempio abbiamo uno sfondo nero con un'immagine 'picture.png' in alto, l'immagine non si ripete in nessuno dei due assi ed è posizionata nell'angolo in alto a sinistra. Il / dopo la posizione deve essere in grado di includere la dimensione dell'immagine di sfondo che in questo caso è impostata come larghezza 600px e auto per l'altezza. Questo esempio potrebbe funzionare bene con un'immagine caratteristica che può sfumare in un colore a tinta unita.

NOTA: l' uso della proprietà dello sfondo abbreviato reimposta tutti i valori delle proprietà dello sfondo precedentemente impostati, anche se non viene fornito un valore. Se si desidera solo modificare un valore della proprietà dello sfondo precedentemente impostato, utilizzare invece una proprietà longhand.