CSS, gestione dello sfondo

Se prima di iniziare a usare i fogli di stile avete fatto in passato qualche esperienza con il codice dell'HTML sapete allora che colori e sfondi potevano essere assegnati alle tabelle e all'elemento body del documento. E che effetti! Le limitazioni dell'HTML erano combattute proprio con le tabelle. Spesse volte, ricordo, si costruiva la struttura del sito all'interno di tabelle con celle trasparenti e comunque riempite con immagini di contorno nel tentativo di centrare lo sfondo e allinearlo così come esso doveva apparire. Senza questi stratagemmi l'immagine di sfondo veniva ripetuta fino a riempire tutta la pagina!

I fogli di stile mettono fine a questo genere di lavori, adesso è possibile regolare lo sfondo attraverso le proprietà (singole): background-color, background-image, background-repeat, background-attachment e background-position. Se vogliamo invece descrivere le proprietà dello sfondo su un unica riga possiamo farlo attraverso la proprietà (multipla) background.

background-color

Attraverso questa proprietà possiamo assegnare all'elemento un colore di sfondo. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-color: valore}, dove valore corrisponde a una delle strutture già viste per la selezione di un colore oppure corrisponde alla parola chiave trasparent.

background-image

Attraverso questa proprietà possiamo assegnare all'elemento un'immagine di sfondo. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-image: url(valore);}, dove valore può corrispondere a none (nessuna immagine) oppure a un indirizzo (assoluto o relativo) che punta alla risorsa e quindi all'immagine.

Osservazione: conviene impostare solo il colore oppure solo l'immagine?

La logica (quella che stabilisce il comportamento del browser) dice che conviene impostare entrambe le proprietà, anche se l'immagine prevale sul colore scelto. Perché , allora, impostare entrambi i valori? Se il browser dell'utente ha disabilitato la visualizzazione delle immagini (oppure la stessa immagine non è più disponibile presso l'url indicato, ad esempio) l'oggetto verrà riempito con il colore scelto. Scegliete sempre un colore di sfondo per l'oggetto!

background-repeat

Attraverso questa proprietà possiamo suggerire al browser come ripetere l'immagine nell'oggetto. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-repeat: valore;}, dove valore corrisponde a uno dei seguenti valori: repeat, l'immagine viene ripetuta fino a riempire tutto l'elemento (come fa di default l'HTML); repeat-x, l'immagine viene ripetuta fino a riempire in orizzontale tutto l'elemento; repeat-y, l'immagine viene ripetuta fino a riempire in verticale tutto l'elemento; no-repeat, l'immagine è riportata nell'oggetto una sola volta (a partire dall'angolo in alto a sinistra).

background-attachment

Attraverso questa proprietà possiamo assegnare all'immagine dell'elemento la modalità di fissaggio alla pagina. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-attachment: valore;}, dove valore può corrispondere a: scroll (l'immagine scorre assieme al testo del documento) oppure a fixed (l'immagine resta attaccata al documento e il testo gli scorre sopra).

background-position

Attraverso questa proprietà possiamo indicare le coordinate da applicare all'immagine dell'elemento. La sintassi dettata dalle specifiche del W3C è la seguente: selettore{background-position: ascissa ordinata;}.

background

Attraverso questa proprietà possiamo assegnare, come dicevo all'inizio, tutte le singole proprietà fin qui viste. La sintassi prevede l'elenco dei valori (separati da un carattere di spazio) in un ordine anche diverso da quello che presento qui:

selettore{background-color background-image background-repeat background-attachment background-position;}

Notate la presenza del carattere ; che chiude la lista! Come dicevo poco fa l'ordine delle singole proprietà non è importante (è sufficiente la sola presenza della proprietà background-color per validare tutta la regola), tanto il browser riesce in ogni caso ad associare i valori alle singole proprietà dal momento che esse non danno luogo ad ambiguità e incomprensioni.