# CSS/Proprietà di base/Sfondo

CSS
Copertina Tutti i moduli · Sviluppo
    Copertina
* Regole e sintassiCSS/Regole_e_sintassi
** SelettoriCSS/Selettori
** CascadeCSS/Cascade
** Unità di misura, ereditarietà e box modelCSS/Unità_di_misura,_ereditarietà_e_box_model
* Supporti di visualizzazione
** Media
** Media con pagine
** Fogli di stile parlati
* Proprietà di baseCSS/Proprietà_di_base
** SfondoCSS/Proprietà_di_base/Sfondo
** Testo baseCSS/Proprietà_di_base/Testo_base
** Testo avanzatoCSS/Proprietà_di_base/Testo_avanzato
** ListeCSS/Liste
** Tabelle
** Animazioni, trasformazioni, transizioni
* Disegnare la struttura della paginaCSS/Disegnare_la_struttura_della_pagina
** PosizionamentoCSS/Posizionamento
* Contenuto generatoCSS/Contenuto generato
* Altre proprietàCSS/Altre_proprietà
* CompatibilitàCSS/Compatibilità
* ReferenceCSS/Reference
Modifica il sommario
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

La proprietà background-color permette di definire il colore di sfondo di un elemento.
Sintassi:
Il valore deve essere un colore. Il colore verrà inoltre usato per riempire gli spazi non coperti da un'eventuale immagine di sfondo.
Esempio:

### background-image

La proprietà background-image definisce un'eventuale immagine da usare per lo sfondo dell'elemento.
Sintassi:
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:

## background-repeat

Imposta il modo in cui l'immagine viene ripetuta sullo sfondo.
Sintassi:
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

Questa funzione consente di scegliere se l'immagine dovrà essere fissa sullo sfondo, o muoversi con la pagina.
Sintassi:
dove <valore> può assumere i seguenti valori:
* fixed: l'immagine è fissa sullo sfondo
* scroll: l'immagine si muove con la pagina

## Posizione

Questa funzione decide come deve essere posizionata l'immagine all'interno della pagina.
Sintassi:
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:
L'immagine è così mostrata al centro.

## Riepilogo

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:

## Alcuni esempi

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: