Guida base al CSS

Come abbiamo visto prima, il comando background-color specifica il colore dello sfondo di un elemento. Il colore di sfondo di una intera pagina si imposta in questo modo:

body {background-color: lightblue;}

Con lo stesso concetto possiamo impostare lo sfondo a diversi elementi HTML come <div>, <p> , <h> .

Impostare una immagine come sfondo

Con la proprietà background-image possiamo impostare una immagine da usare come sfondo per un elemento.
Di default questa immagine (che nell'esempio si chiama paper.gif) viene ripetuta in modo da coprire l'intero elemento. Si imposta così:

	
body {background-image: url("paper.gif");}

E' bene usare come sfondo una immagine che non disturbi la lettura.
Alcune immagini è bene che non vengano ripetute in tutti i sensi perchè originerebbero uno sfondo "psichedelico", quindi è meglio impostare che vengano ripetute o solo verticalmente o solo orizzontalmente, in questo modo:

	
body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

Per ripetere l'immagine solo verticalmente, impostare repeat-y; Si può decidere anche di mostrare l'immagine di sfondo solo una volta con la proprietà background-repeat:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

In questo esempio sopra, se andiamo a scrivere del testo nella pagina, l'immagine di sfondo si troverà esattamente nello stesso posto del testo, impedendone magari la lettura. Possiamo cambiare la posizione dell'immagine in modo che non disturi il testo. Aggiungiamo la proprietà background-position per posizionare la nostra immagine per esempio in alto a destra:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

e se questo non bastasse possiamo impostare un margine alla pagina che abbia la stessa dimensione della larghezza dell'immagine in modo che così il testo non ci vada sopra! Se per esempio la nostra immagine di sfondo (img_tree.png) ha una larghezza di 200 px, possiamo mettere un margine destro alla pagina in modo che rimanga, a partire dal bordo destro della pagina, un margine di 200px (e così la nostra immagine si vedrà senza interferire con il testo).

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
}

Se vogliamo che l'immagine di sfondo rimanga fissa e che anche scrollando la pagina, l'immagine non si muova, aggiungiamo background-attachment: fixed;

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
    background-attachment: fixed; 
}