Immagine, colore o gradiente come lo sfondo in CSS

CSS background o semplicemente lo sfondo è la proprietà che aggiunge sfondo per qualsiasi elemento HTML. Ogni elemento ha proprio  sfondo che può essere trasparente (di default), o avere  una o piu  immagine, essere a colori o avere come sfondo un gradient di colori . Per un elemento sulla pagina web, è possibile specificare più di una  immagine di sfondo.

Lo sfondo non viene visualizzato negli elementi (block) vuoti con altezza pari a zero. Proprietà dello sfondo non si ereditano, ma lo sfondo dell'unità genitore sara sempre visibile. Se su una immagine grande mettiamo una immagine piccola i bordi del genitore o della immagine grande saranno comunque  visibili.

 

1. Sfondo a colori  background-color

La proprietà imposta il colore che riempi  qualsiasi elemento HTML. Per elementi block il colore di sfondo  vera  distribuito per  tutta la larghezza e l'altezza del blocco e  per elementi inline solo nel aria del loro contenuto. Non si ereditata.

background-color
Valore:  
Colore Il colore di sfondo può essere impostato in diversi modi:HEX, RGB, RGBA, HSL, HSLA, .
transparent valore di default trasparente
initial Ritorna il valore della proprietà al valore di default.
inherit Valore della proprietà viene ereditato dal elemento genitore.

video prevui

E vediamo come si scrive nel codice CSS

div {background-color: papayawhip;}
h1 {background-color: palevioletred;}
p {background-color: peachpuff;}
span {background-color: peru;}

E anteprima

Prova di background-color

2. Una immagine come lo sfondo in css background-image

La proprietà imposta l'immagine come lo  sfondo per un elemento nella pagina web.

Lo sfondo può essere una immagine o un gradiente che viene impostato con seguente codice

background-image: linear-gradient (),

background-image: radiale gradiente ()

oppure posiamo fare che il gradiente usato si ripete allora la sintassi sara seguente

background-image: repeating-linear-gradient(),

background-image: repeating-radial-gradient().

Non si eredita.

background-image
Valore:  
url('URL') Percorso relativo o assoluto della immagine
none Valore di default, nonché elimina immagine al elemento che si trova in un gruppo di elementi che possiedono un'immagine di sfondo.
initial Ritorna il valore della proprietà al valore di default.
inherit Eredita valore della proprieta dal elemento genitore.

Sintassi

div {background-image: url(http://ioeweb.it/images/flower.png);}
table {background-image: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);}
p {background-image: linear-gradient(to top left, white, lightblue);}

3. Ripetizione del'immagine di sfondo nei css background-repeat

Specifica come ripetere una immagine utilizzata come lo sfondo. Non si eredita.

background-repeat
Valore:  
repeat Tutte la pagina o blocco saranno riempite da disegno indicato. Se indichiamo valore nel di background-position, allora la ripetizione del immagine comincerà dalla posizione indicata.
no-repeat La immagine di sfondo non si ripeterà
repeat-x La imagine di sfondo ripetera dal lato sinistro al lato destro della pagina web e soltanto lungo bordo superiore della pagina o blocco.
repeat-y immagine di sfondo è ripetuto dalla cima al fondo di una pagina web sul lato sinistro della pagina.
initial Ritorna il valore della proprietà al valore di default.
inherit Eredita valore dal elemento genitore.

Scrittura nel codice

div {background-repeat: no-repeat;}
div {background-repeat: repeat-x;}
div {background-repeat: repeat-y;}
div {background-repeat: repeat;}

video prevui

no-repeat

repeat-x

repeat-y

repeat

4. Posizionamento sfondo con background-position

Proprietà controlla la posizione esatta dell'immagine usata come  sfondo. È possibile determinare la posizione iniziale dell'immagine di sfondo, sotto forma di coordinate orizzontali e verticali usando valori assoluti e valore in percentuale . I valori di  background-position di default sono  0% 0%. Il cio significa che l'immagine avra il suo inizio nel angolo in alto alla sinistra della pagina o blocco. Non si eredita.

background-position
Valore:
left top,
left center,
left bottom,
right top,
right center,
right bottom,
center top,
center center,
center bottom
Posizionamento in orizzontale e verticale è definito da una coppia di parole chiave. Se si specifica una parola chiave, il secondo valore sarà center.
px / em/ % Specifica due valori, il primo definisce la distanza fra lato sinistro d'immagine e il bordo sinistro del elemento contenitore (per orizzontale), il secondo valore indica la distanza tra il lato superiore dell'immagine e il bordo superiore dell'elemento contenitore (per verticale). E possibile utilizzare valori negativi per ritagliare parte dell'immagine.
La percentuale è calcolata rispetto all'immagine e relativo al elemento contenitore in cui è situato. Ad esempio, quando si impostabackground-position:50% 50%; centro dell'immagine coincidera con il centro dell'elemento contenitore.
Possono essere usati nello steso momento valorii espressi in px, em e %.
initial Ritorna il valore della proprietà al valore di default.
inherit Eredita valore dal elemento genitore.

Come si scrive

div {background-position: center center;}
div {background-position: 50% 100%;}
div {background-position: left;}
div {background-position: 50px;}

È possibile impostare una immagine di sfondo in modo che si trovera  nella parte inferiore del blocco contenitore o la pagina :

div {
background-color: #FCF8F7;
height: 120px;
background-image: url(http://ioeweb.it/images/Luiggi2.jpg);
background-position: left bottom;
background-repeat: repeat-x;
}

Inoltre, grazie alla proprietà che posiziona immagine di sfondo, è possibile utilizzare piu immagini come lo sfondo:

div {
width: 660px;
background-color:#E0E4EF;
height: 300px;
background-image: url(http://ioeweb.it/images/flower112.png), url(http://ioeweb.it/images/leaf112.png), 
url(http://ioeweb.it/images/flower221.png);
background-repeat: repeat-x;
background-position: 0 250px, 0 150px, 0 98px; 
}

Come avete notato per ogni immagine abbiamo indicato il punto di partenza della ripetizione.

5. Incollare un'immagine sulla pagina con proprietà background-attachment

La proprieta background-attachment consente di fissare una immagine utilizata come lo sfondo alla posizione indicata nella finestra del browser allo scorimento della pagina. Non si eredita.

background-attachment
Valore:
scroll Valore di default immagine di sfondo score insieme con il testo e altri elementi della pagina
fixed Valore incolla immagine di sfondo sulla pagina che resta sempre nella stessa posizione.
local Immagine di sfondo score insieme con il contenuto dell'elemento.
initial Ritorna il valore della proprietà al valore di default.
inherit Valore della proprietà viene ereditata dal elemento genitore.

Sintassi

div {background-attachment: scroll;}
div {background-attachment: fixed;}
div {background-attachment: local;}

video prevui

6. Riempire con lo sfondo padding e bordo del elemento, background-clip

La proprieta specifica se il colore o immagine di sfondo sara limitato dal contenuto(modello box classico nei css) o si estendera fino al bordo esterno( border). Non si eredita.

Qui sarebbe opportuno di rivedere il modello classico del box nei CSS per capire meglio l'argomento

background-clip
Valore:  
border-box Lo sfondo si estende fino al bordo esterno del elemento. E il valore di default.
padding-box Lo sfondo copre a parte il contenuto anche il padding del elemento.
content-box Lo sfondo compre solo il contenuto del elemento.
initial Imposta come valore della proprieta il valore di default.
inherit Eredita valore della proprieta dal elemento genitore.

Sintassi

div {background-clip: border-box;}
div {background-clip: padding-box;}
div {background-clip: content-box;}

 

7. La posizione dell'immagine di sfondo rispetto al suo blocco padre, background-origin

Proprietà determina dove avra inizio (anglo  in alto a sinistar del immagine ) immagine di sfondo. Se allo stesso tempo viene impostata la proprietà background-attachment: fixed , la proprietà background-origin sara ignorata

background-origin
Valore:  
padding-box Posizionamento del immagine o altro tipo di sfondo vine calcolato partendo dall'angolo in alto a sinistra del lato interno dell'elemento(eventuale bordo escluso). E il valore di default della proprieta .
border-box Posizionamento del immagine o altro tipo di sfondo vine calcolato partendo dall'angolo in alto a sinistra del lato esetron dell'elemento(eventuale bordo vine incluso nei calcoli)
content-box Posizionamento del immagine o altro tipo di sfondo vine calcolato partendo dall'angolo in alto a sinistra del contenuto dell'elemento
initial Imposta come valore della proprieta il valore di default.
inherit Eredita valore della proprieta dal elemento genitore.

Le sintassi

div {background-origin: padding-box;}
div {background-origin: border-box;}
div {background-origin: content-box;}

La differenza fra background-clip e background-origin.

Vediamo un esempio con 3 situazioni diversi dove utilizzeremo la stessa immagine

background-origin: content-box;

Immagine nel nostro caso utilizzata come lo sfondo parte dal angolo in alto a sinistra del aria del contenuto perche abbiamo impostato background-origin: content-box; e si espande coprendo sotto il pagging e il border

background-clip: content-box;

Nel background-clip invece immagine o altro elemento utilizzato per lo sfondo viene RITAGLITO secondo la proprieta impostata nel nostro caso content-box quindi ritagliato secondo l'aria del contenuto del elemento

Semplice background-immage

 

8. Grandezza del immagine di sfondo  background-size

 

La proprieta consente di scalare l'immagine di sfondo verticalmente e orizzontalmente (background-image). Esso descrive come l'immagine sarà allungata o ritagliata per chiudere completamente  l'area di sfondo. Utilizzando questa proprietà è possibile ridurre la larghezza e l'altezza del'immagine Non si eredita.

background-size
Valore:
auto Valore di default. Altezza e largezza del immagine sono uguali alle sue valori di origine.
px / em /cm Le dimensioni vengono specificati da una una coppia di valori, il primo valore imposta la larghezza dell'immagine, il secondo – la sua altezza. Per scalare immagine insieme con il font, le dimensione dell'immagine deve essere specificate in em. em.
% Specifica le dimensioni dell'immagine di sfondo come percentuale della larghezza o altezza dell'elemento dove vine utilizzato tale sfondo.
cover Scala immagine mantenendo le proporzioni in modo che la sua larghezza o altezza è uguale alla larghezza o altezza del blocco.
contain Scala immagine mantenendo le proporzioni in modo che rientri interamente all'interno dell'unità.
initial Imposta come valore della proprieta valore di default.
inherit Eredita valore dal elemento denitore.

Le sintassi

div {background-size: 300px 150px;}
div {background-size: 50% 30%;}
div {background-size: cover;}
div {background-size: contain;}

 

background-size: 200px 150px;
background-size: 50% 30%;
background-size: cover;
background-size: contain;

 

9. Specificare lo sfondo di un elemento con unica proprieta background

La struttura permette di descrivere in una sola stringa le seguenti proprietà dello sfondo: background-color, background-image, background-position, background-size, background-repeat, background-origine, background-clip  e background-attachment. Non è obbligatorio  specificare tutte le proprietà, se qualsiasi proprietà viene omessa, si prenderà il valore di default.

Se nel descrivere background con una sola proprieta   userete   background-size,  il suo valore dovrà essere scritto tra una  barra / per separarla dalla proprietà background-position.

Le sintassi

body { 
background: #00ff00 url("smiley.gif") no-repeat fixed center; 
}

 

10. Sfondi multipli

 

CSS3 ha fornito un'altra caratteristica utile sono sfondi multipli che può essere specificata sia per la pagina intera, sia per un elemento separato. Ad esempio:

div {
width: 480px;
height: 430px;
background-image: url(love.png), url(sposi.png), url(cornice.png);
background-repeat: no-repeat;
background-position: top left, left center, top center;
}

Le immagini devono essere elencate  nell'ordine di sovrapposizione, l'immagine più in alto dovrebbe essere il primo, e il più grande per esempio l'ultimo.

Letto 1215 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso