Come inserire una immagine di sfondo sulla pagina web
Il linguaggio Html consente di modificare lo sfondo della pagina web visualizzando un'immagine tramite l'attributo background del tag body o con un foglio di stile CSS.
L'attributo background del tag body
Il primo metodo utilizza esclusivamente i tag del linguaggio Html.
Tutto ciò che viene visualizzato sullo schermo del browser è contenuto nel tag body del documento Html della pagina.
Il tag body ha un attributo specifico per modificare lo sfondo, si tratta dell'attributo background.
Per visualizzare un'immagine come sfondo, devo semplicemente assegnare all'attributo background il nome del file grafico che voglio utilizzare.
<BODY BACKGROUND=[nome file]>
Il nome dell'immagine deve essere posto tra doppie virgolette per consentire una corretta interpretazione da parte del browser ed evitare fraintendimenti con gli altri attributi nel tag.
Oltre al nome del file devo anche indicare il percorso ( path ) ossia l'indirizzo URL o la cartella dove si trova il file sul sito web.
<BODY BACKGROUND=[/cartella/nome file]>
Se non specifico alcun percorso possono verificarsi degli errori perché il browser cerca l'immagine nella cartella corrente della pagina che sta visualizzando.
L'effetto finale sul browser è il seguente:
Cosa accade se il file non esiste?
Il browser non visualizza l'immagine come sfondo ma il colore di default. In genere, mostra uno sfondo di colore bianco o grigio, a seconda della configurazione del browser.
Un esempio pratico
Un esempio di utilizzo dell'attributo background è il seguente:
<html>
<head></head>
<body background="/sfondopagina.gif">
</body>
</html>
In questo caso ho utilizzato il file sfondopagina.gif che si trova nella root (/) del sito web.
Per una buona pratica di web development ho inserito l'indirizzo del file tra virgolette.
Dove viene visualizzata l'immagine di sfondo
La visualizzazione dell'immagine sullo sfondo comincia dall'angolo in alto a sinistra procedendo verso destra e verso il basso.
Se lo schermo dell'utente ha una superficie più grande dell'immagine ( es. alta risoluzione video ), la foto non copre tutto lo schermo. Il browser la ripete in orizzontale e in verticale l'immagine fino a occupare tutto lo spazio.
Questo effetto è esteticamente sgradevole e andrebbe evitato.
L'effetto tappezzatura
La ripetizione automatica dell'immagine di sfondo può essere sfruttato per creare delle trame di tappezzatura che, ripetendosi in verticale e in orizzontale, danno compattezza allo sfondo.
In questo caso ho usato appositamente un'immagine di piccole dimensioni ( trama ).
L'immagine viene ripetuta automaticamente fino a coprire tutta la superficie visibile del browser ed è indipendente dalla risoluzione del browser dell'utente.
L'effetto finale è simile a quello dei mattoni in un muro o dei rotoli della carta da parati sul muro.
Quali immagini usare come sfondo
I browser riconoscono tutti i principali formati grafici delle immagini: GIF, JPG o PNG.
E' preferibile usare soltanto questi formati grafici. Gli altri formati meno conosciuti potrebbero non essere interpretati da tutti i browser.
Come visualizzare un'immagine sullo sfondo in CSS
Il linguaggio CSS offre una via alternativa e migliore per ottenere lo stesso effetto.
Per visualizzare la foto sullo sfondo dello schermo devo modificare la proprietà BACKGROUND-IMAGE del tag BODY.
Questo metodo modifica la proprietà del tag body tramite il foglio di stile associato alla pagina web, senza agire sugli attributi del tag.
Un esempio pratico
<html>
<head>
<style type="text/css">
body { background-image: url(/data/foto.jpg); }
</style>
</head>
<body>
</body>
</html>
La proprietà BACKGROUND-IMAGE comunica al browser di utilizzare come sfondo l'indirizzo URL del file foto.jpg nella cartella data.
In questo caso non è necessario inserire l'attributo Background sul tag Body. L'effetto finale sul browser dell'utente è sempre lo stesso.
Nota. Questo metodo è da preferirsi al precedente. I fogli di stile in CSS hanno molte più potenzialità rispetto agli attributi del linguaggio Html.
