CSS/Proprietà di base/Sfondo

Wikibooks, manuali e libri di testo liberi.

Grazie ai CSS possiamo facilmente assegnare un colore o un'immagine di sfondo, ripetuta o meno, ad un elemento nel web: dal body al paragrafo, dalla tabella all'input form.

Colore[modifica]

La proprietà background-color permette di definire il colore di sfondo di un elemento.

Sintassi:

 selettore { background-color: <valore>; }

Il valore deve essere un colore. Il colore verrà inoltre usato per riempire gli spazi non coperti da un'eventuale immagine di sfondo.

Esempio:

body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0) }

background-image[modifica]

La proprietà background-image definisce un'eventuale immagine da usare per lo sfondo dell'elemento.

Sintassi:

 selettore { background-image: <valore> }

dove <valore> può essere:

  • un URL assoluto o relativo che punti ad un'immagine (in questo caso bisognerà usare la notazione url(percorso)
  • none (valore di default): non verrà applicata nessuna immagine allo sfondo

Esempio:

body { background-image: url(immaginesfondo.gif); }
.class2 { background-image: url(http://www.wikibooks.it/immagine.gif); }

background-repeat[modifica]

Imposta il modo in cui l'immagine viene ripetuta sullo sfondo.

Sintassi:

selettore { background-repeat: <valore>; }

I valori possibili sono i seguenti:

  • repeat: l'immagine di sfondo viene ripetuta sia in senso orizzontale sia in senso verticale
  • repeat-x: l'immagine di sfondo viene ripetuta in senso orizzontale
  • repeat-y: l'immagine di sfondo viene ripetuta in senso verticale
  • no-repeat: l'immagine di sfondo viene visualizzata solo una volta, senza ripetizioni

background-attachment[modifica]

Questa funzione consente di scegliere se l'immagine dovrà essere fissa sullo sfondo, o muoversi con la pagina.

Sintassi:

selettore { background-attachment: <valore>; }

dove <valore> può assumere i seguenti valori:

  • fixed: l'immagine è fissa sullo sfondo
  • scroll: l'immagine si muove con la pagina

Posizione[modifica]

Questa funzione decide come deve essere posizionata l'immagine all'interno della pagina.

Sintassi:

selettore { background-position: <valore>; }

dove <valore> può assumere questi valori:

  • top left in alto a sinistra
  • top center in altro centrata
  • top right in alto a destra
  • center left al centro a sinistra
  • center center al centro centrata
  • center right al centro a destra
  • bottom left in basso a sinistra
  • bottom center in basso centrata
  • bottom right in basso a destra
  • <valori in percentuale>

Per quanto riguarda in valori in percentuale, essi decidono il valore x e y in percentuale rispetto alla pagina.

Esempio:

selettore { background-position: 50% 50% }

L'immagine è così mostrata al centro.

[modifica]

Per una maggiore compattezza e semplificazione del codice, possiamo riassumere tutte le proprieta relative allo sfondo scrivendo semplicemente background e tutti i 5 valori possibili a seguire.

Esempio:

 selettore { 
      background: blue 
                  url(immaginedisfondo.gif) 
                  no-repeat 
                  scroll 
                  center center;
 }

Alcuni esempi[modifica]

Per creare sfondi accattivanti e leggeri in modo semplice, è sufficiente usare con un po' di abilità programmi di grafica e la proprietà background. Ad esempio è molto facile creare uno sfondo sfumato che riempie l'intera pagina.

Vogliamo ottenere uno sfondo azzurro nella parte superiore della pagina e blu nella parte inferiore; per ridurre il peso della pagina finale, usiamo un'immagine stretta e alta che poi ripeteremo in orizzontale.
Per prima cosa, usando un programma di grafica come Gimp, creiamo un'immagine con altezza a piacere e larghezza 2px e la riempiamo in verticale con il riempimento sfumato che preferiamo.
Una volta salvata l'immagine nella cartella della pagine, ad esempio come "back.png", usiamo qualche proprietà CSS per applicare lo sfondo alla pagina:

selettore { 
 background-color: lightblue; /*riempie lo spazio non coperto dall'immagine*/
 background-image: url(back.png);
 background-repeat: repeat-x; /*ripete l'immagine in orizzontale*/
 background-position: bottom left; /*allinea l'immagine in basso*/
}