Questa pagina è parte della guida Come creare un sito da zero
Background colorato
Il background (sfondo) di un sito, o di una pagina web, può essere semplicemente bianco, o colorato, oppure può essere costituito da una immagine, o da un da un video. Può essere statico, o animato.
Un semplice background colorato, si implementa in questo modo:
body { background-color: yellow; }
Naturalmente, la regola può essere applicata a qualunque contenitore.
Nel caso di un div, si userà una classe, o un id.
Esempio:
<style>
.esempio { background-color: yellow; }
</style>
<div class="esempio">
contenuto
</div>
Background immagine
L'immagine di background si implementa in questo modo:
background-image: url("immagine.jpg");
Le proprietà sono:
- background-repeat
- background-attachment
- background-position
- background-size
Per il caricamento di un'immagine di background con i nuovi formati immagine, leggi:
Velocià e performance di un sito web
background-repeat
Supporta le seguenti proprietà:
- repeat = Impostazione predefinita. L'immagine di sfondo viene ripetuta verticalmente e orizzontalmente. L'ultima immagine viene ritagliata se non si adatta.
- no-repeat = L'immagine di sfondo non viene ripetuta e viene mostrata una sola volta.
- repeat-x = L'immagine di sfondo viene ripetuta solo orizzontalmente
- repeat-y = L'immagine di sfondo viene ripetuta solo verticalmente
- space = L'immagine di sfondo viene ripetuta, ma senza restare tagliata. La prima e l'ultima immagine restano attaccate ai margini e gli spazi bianchi vengono distribuiti in modo uniforme tra tutte le immagini.
- round = L'immagine di sfondo viene ripetuta e schiacciata, o allungata per riempire tutto lo spazio disponibile.
background-attachment
Supporta le proprietà fixed o scroll.
Nel primo caso il background è fisso e il contenuto scrolla sopra di esso.
Nel secondo caso, il background scrolla insieme al contenuto.
background-position
Supporta le proprietà
- top
- bottom
- left
- right
- center
- top right
- top left
- bottom right
- bottom left
Supporta anche le percentuali.
Esempio:
background-position: 50% 50%;
Dove la prima percentuale stabilisce la distanza dal margine superiore e la seconda la distanza dal margine sinistro.
background-size
Supporta le seguenti proprietà:
- auto = immagine in dimensione originale
- cover = immagine ridimensionata per coprire l'intero contenitore (tagliata se necessario)
- contain = immagine ridimensionata (mantenendo le proporzioni) in modo che sia completamente visibile
La dimensione dell'immagine di sfondo può anche essere impostata in percentuale.
Esempio:
background-size: 50% 50%;
Dove il primo valore rappresenta la larghezza e il secondo l'altezza. Se c'è un solo valore, il secondo viene impostato su auto.
Immagine di sfondo su dispositivi Apple
Sfortunatamente, Apple Safari ha un problema nel rendering di immagini di sfondo fisse.
Per risolvere il problema, in caso si voglia caricare un'immagine come sfondo fisso del sito web, bisogna usare particolari regole di stile.
Potete trovare la soluzione nella pagina
Soluzioni specifiche per dispositivi Apple
Background multipli
È possibile sovrapporre diverse immagini di sfondo, giocando con le trasparenze. Per farlo, basta separare gli url con una virgola.
background-image: url(img1.png), url(img2.png);
La prima immagine sarà quella più vicina a chi guarda e via di seguito.
Anche possibile applicare regole diverse ai singoli background come in questo esempio:
background: url(img1.png) top center no-repeat, url(img2.png) top center repeat-y;
Background semitrasparente
La semitrasparenza del background può essere ottenuta in due modi: usando "opacity", oppure usando i colori RGBA (Red-green-blue-alpha), dove alpha rappresenta l'informazione relativa al "canale alfa", tramite il quale è possibile impostare la trasparenza del colore RGB.
background-color: green; opacity: 0.5
background: rgba(0, 128, 0, 0.5);
(dove l'ultimo valore determina la trasparenza)
La differenza sta nel fatto che usando opacity anche il contenuto (testo o altro) sopra al background erediterà la medesima trasparenza. Usando, invece, i colori RGBA, il contenuto sovrapposto rimarrà nitido.
Esempio:
opacity
rgba
Background e performance
Per i problemi di performance legati all'utilizzo del background, leggi la guida:
Velocità e performance di un sito web
Nella pagina: "Background" della sezione "Risorse per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.
Aiuta il sito! Condividi questa pagina su:
Elenco argomenti correlati:
Altro di interesse