Dare un colore o un’immagine di sfondo con il CSS

In questa pagina vedremo come è possibile dare un colore di sfondo od un’immagine di sfondo al body, alle tabelle e ai div.
Iniziamo con il body che in poche parole è il corpo della pagina e all’interno vi è tutto il contenuto che vedi attraverso il tuo browser.
Dobbiamo semplicente utilizzare il seguente css:

body {
           background-color:#ff0000;
           background-image: url('immagine.gif');
}

Il background-color è il colore di sfondo che diamo alla nostra pagina, mentre il background-image è l’immagine di sfondo che diamo alla nostra pagina.
Questi due tipi di background possono stare assieme (come si vede dal codice) oppure puoi decidere di mettere solamente il colore di sfondo o l’immagine di sfondo.
Nel caso in cui decidi di lasciarli entrambe, la pagina si aprirà con il colore di sfondo che hai scelto, e successivamente, quando la pagina si caricherà (questioni di attimi, dipende dalla velocità di connessione) vedrai l’immagine come sfondo.

Stessa cosa per le table:

table {
           background-color: red;
           background-image: url('immagine.gif');
}

Ricordandoci di assegnare ad un div un ID, possiamo modificare il nostro CSS in questo modo nel caso in cui l’ID si chiami prova
Esempio codice all’interno del body

<div id="prova">bla bla bla</div>

Esempio codice all’interno del CSS per il div id=”prova”

#prova {
           background-color: red;
           background-image: url('immagine.gif');
}

Nel seguente esempio vedremo il body di colore rosso come sfondo, la table con un’immagine di sfondo e il div con ID=”prova” con il colore giallo di sfondo:
Clicca qui per l’esempio
Come avrai sicuramente notato la tabella è ben diversa dal div: infatti il div (quello con l’immagine di sfondo) si estende per tutta la lunghezza della pagina indipendentemente dalla lunghezza del testo, mentre la tabella è grande quanto la lunghezza del testo.
Ovviamente per risolvere questo problema possiamo dare al div, oltre allo sfondo, anche un’indicazione che riguarda la sua altezza e la sua larghezza:
Esempio codice css per il DIV id=”prova”

#prova {
             width:200px;
             height:300px;
}

Con questo css possiamo vedere che il width (larghezza) è di 200 px e che l’height (altezza) è di 300px.