HTML - Sfondi

Lo sfondo (background) di default di una pagina web sarà bianco. Poichè non sempre può piacere, HTML fornisce due modi per modificare lo sfondo di una pagina web.

Sfondo Html tramite Colori
Sfondo Html tramite Immagini

Analizzeremo adesso uno per uno entrambi gli approcci utilizzando degli esempi appropriati.

Sfondo Html tramite Colori

L' attributo bgcolor serve per stabilire un colore di sfondo (Background Color) in un elemento HTML, generalmente viene utilizzato per inserire uno sfondo in una pagina web o in una tabella. La seguente è la sintassi generica per utilizzare l' attributo bgcolor con qualsiasi tag.

<tagname bgcolor="color_value"...>

Il valore di 'color_value' può essere in uno dei seguenti formati.

<!-- Format 1 - Con il nome del colore -->
<table bgcolor="lime" >
 
<!-- Format 2 - Con il valore esadecimale -->
<table bgcolor="#f1f1f1" >
 
<!-- Format 3 - Con il valore RGB -->
<table bgcolor="rgb(0,0,120)" >

Esempio

Adesso degli esempi pratici di come impostare l' attributo bgcolor in alcuni tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>

<!-- Format 1 - Use color name -->
<table bgcolor="yellow" width="100%">
<tr><td>
This background is yellow
</td></tr>
</table>
 
<!-- Format 2 - Use hex value -->
<table bgcolor="#6666FF" width="100%">
<tr><td>
This background is sky blue
</td></tr>
</table>
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor="rgb(255,0,255)"  width="100%">
<tr><td>
This background is green
</td></tr>
</table>

</body>
</html>

Produrrà il seguente risultato:

This background is yellow

This background is sky blue

This background is green

Sfondo Html tramite Immagini

Anche l' attributo background può essere usato per impostare lo sfondo di un elemento HTML, in particolare per lo sfondo del corpo (body) di una pagina web e di una tabella. Oltre che il colore, può essere utilizzato come sfondo un immagine, a seguire degli esempi di utilizzo dell' attributo background con alcuni tag.

Nota: L' attributo background è stato deprecato, si raccomanda di utilizzare i fogli di stile CSS per le impostazioni dello sfondo.

<tagname background="Image URL"...>

Fra i formati più utilizzati troviamo JPEG, GIF e PNG.

Esempio

A seguire degli esempi per impostare un immagine come sfondo per una tabella.

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>

<!-- Set table background -->
<table background="/images/html.gif" width="100%" height="100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
 
</body>
</html>

Produrrà il seguente risultato:

This background is filled up with HTML image.

Sfondo Pattern & Trasparenza

Molti siti utilizzando sfondi formati da pattern o trasparenti. Questo è possibile semplicemente utilizzando come sfondo delle immagini di pattern o trasparenti.

Si consiglia, durante la creazione di un pattern o di un immagine GIF o PNG trasparente, di utilizzare le dimensioni minori possibili, anche di 1x1 per evitare di appesantire il sito ed evitare quindi che la pagina carichi troppo lentamente.

Esempio

A seguire un esempio di tabella con un immagine pattern di sfondo:

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>

<!-- Set a table background using pattrern -->
<table background="/images/pattern1.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>

<!-- Another example on table background using pattrern -->
<table background="/images/pattern2.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
 
</body>
</html>

Produrrà il seguente risultato:

This background is filled up with a pattern image.