Diversi modi di utilizzare le immagini come sfondo di elementi in un documento web

Spesso si legge in vari articoli sul tema dei Fogli di Stile o, anche tra i miei, che dove non arriva il semplice linguaggio di markup [leggi html o XHTML], interviene il codice CSS, appunto.

Nell´articolo odierno vedremo una semplicissima pagina html "arricchita" prima da una sola immagine di sfondo, poi da due, poi tre fino ad arrivare ad inserire ben 4 files grafici di background.

Vorrei portare la vostra attenzione su quanto ho appena scritto: ho infatti menzionato il numero di sfondi, cioè 4, che vedremo nella pagina. Effettivamente è proprio così ma c´è un particolare da sottolineare: gli elementi che possono essere "trattati" in una pagina sono solo 2: l´elemento genitore html ed il suo discendente diretto, cioè: body. E qui ci fermiamo, in quanto questi sono gli unici elementi, combinati assieme, ai quali possiamo assegnare elementi grafici di sfondo.

Se ho menzionato 4 elementi, vorrà dire che, oltre ai due appena descritti, possiamo assegnarne ancora; tutto dipende dal numero di elementi che abbiamo nella pagina. Possiamo, per esempio, avere anche un tag <H1> con una immagine di sfondo. Possiamo avere, anche, un elemento di blocco #div. Possiamo averne quanti ne vogliamo; nessuno ce lo impedisce ma, come sempre, dobbiamo trovare un compromesso tra "arricchimento" della pagina e la sua leggibilità.

Se siamo arrivati ad avere pagine molto molto più fruibili con l´aiuto dei CSS, non facciamo in modo di tornare agli albori del web con pagine piene di colori nelle quali non si sapeva dove mettere gli occhi per cominciare a leggere. Conclusione di questa premessa: buon gusto!

Assegnare una immamgine di background all´elemento html

L´idea di questo articolo mi è venuta guardando il "museo", più importante, secondo me, e sempre aperto, 24 ore su 24: CSS Zen Garden. Allora cominciamo a vedere come possiamo fare, partendo dall´alto, per assegnare uno sfondo all´elemento padre, cioè: html. Il codice non avrà nessuna nuova dichiarazione, oltre quelle in nostro possesso e che già conosciamo. Quello che a noi interessa è il risultato. Adesso andiamo a vedere il codice:

html{ 
margin:0; 
padding:0;
background-image: url(leave.gif); 
background-repeat: repeat-y;
background-position: 10px 0;
background-attachment: fixed;
} 

Desideriamo avere, nella parte sinistra della pagina, una foglia ripetuta dall´alto verso il basso [repeat-y]. Distante dal bordo sinistro 10 pixel e zero dall´alto. Vogliamo, inoltre, che questa foglia stia "ferma" quando scorriamo la pagina verso il basso, fin dove arriveranno i contenuti. Il codice che ho appena scritto serve per ottenere quello che noi vogliamo. È chiaro che non sarà il solo nella pagina, altrimenti non sortirà nessun effetto. Dobbiamo inserire un contenitore che si allungherà in base ai contenuti inseriti. Noi aggiungiamo un elemento di blocco, con queste caratteristiche:

#content{ 
margin: 20px 80px 10px 220px; 
padding:0; 
border: 1px solid #900; 
background: transparent;
} 

Possiamo anche dichiarare un titolo <H1> ed un paragrafo, perchè no? Questo compito lo lascio a voi. :))) A me interessa mostrarvi l´implementazione del codice CSS nella pagina html attraverso il file di esempio. Fin qui, starete pensando, nulla di particolare. È giusto, rispondo io; ma mi piace, nello scrivere questi articoli, documentare ogni passaggio di quello di cui trattiamo. Andiamo avanti con il secondo step.

Assegnare 2 immagini di background ad un documento html

In questo passaggio vedremo all´opera sia l´elemento html che l´elemento body. Mantenendo, per html, le stesse caratteristiche descritte su, con la stessa immagine di sfondo, scriviamo il codice per body:

body{
margin:0;
padding:0;> 
font-family: 'trebuchet ms', sans-serif;
color:#000; 
font-size:100%;
background: url(fil.gif) 400px 200px no-repeat fixed;
}

Immagino che avrete cercato le 4 righe di codice per posizionare l´immagine di sfondo; in questo caso ho "accorciato" il codice scrivendo le 4 dichiarazioni su un unico rigo. Il risultato non cambia. Noi vorremmo avere uno sfondo dal nome "fil.gif" posizionato a 400 pixel dal lato sinistro e 200 pixel dall´alto. Esso non deve essere ripetuto e deve essere fisso. Il secondo file di esempio ci mostra il risultato.

Con quale browser avete aperto il file? Internet Explorer 6.0? Rimane fisso solo lo sfondo dell´elemento html. Se, invece, lo avete aperto con FireFox 1.5, non ci sono problemi. Tutto ok anche con Mozilla ed Opera. Misteri della fede? No! misteri del browser dello zio Bill (Gates).

Assegnare una immagine di background ad un elemento h1

Oltre alle due immagini fino ad ora viste in azione, nella pagina di esempio possiamo anche avere uno sfondo per il titolo <H1>. Il suo codice è:

#content h1{ 
margin:0; 
padding: .5em; 
color:#fff; 
background:transparent url(bgh1.jpg) repeat-x left top;
} 

Perchè #content h1 e non semplicemente h1? Perchè nella pagina potremmo avere anche altri tag h1 ai quali non vorremmo dare nessuna formattazione con lo sfondo; di conseguenza noi dichiariamo che tutti gli H1 inseriti in #content abbiano la formattazione appena dichiarata. La relativa terza pagina di esempio ci mostra quanto appena scritto.

Assegnare una immagine di background all´elemento #content

Con questo quarto, ed ultimo, passaggio proviamo ad assegnare uno sfondo anche al box #content. Ho preparato, per l´esempio, un piccolissimo file di sfondo che si ripeterà per tutta l´altezza e tutta la larghezza del box. Il suo codice è:

#content{ 
margin: 40px 80px 10px 220px;
padding:0; 
border: 1px solid #900; 
background: transparent url(sfondo.gif) repeat; 
} 

È un codice stra-usato nelle nostre pagine che non credo abbia bisogno di alcuna spiegazione. Non ci resta che visualizzare il relativo quarto file di esempio che racchiude tutti gli oggetti, in questo caso, ai quali possiamo dare un background.