HTML - Sfondi

Per impostazione predefinita, lo sfondo della tua pagina web è di colore bianco. Potrebbe non piacerti, ma non preoccuparti. L'HTML ti offre due buoni modi per decorare lo sfondo della tua pagina web.

  • Sfondo HTML con colori
  • Sfondo HTML con immagini

Vediamo ora entrambi gli approcci uno per uno usando esempi appropriati.

Sfondo HTML con colori

Il bgcolor l'attributo viene utilizzato per controllare lo sfondo di un elemento HTML, in particolare il corpo della pagina e gli sfondi della tabella.

Note- L' attributo bgcolor è obsoleto in HTML5. Non utilizzare questo attributo.

Di seguito è riportata la sintassi per utilizzare l'attributo bgcolor con qualsiasi tag HTML.

<tagname bgcolor = "color_value"...>

Questo color_value può essere fornito in uno dei seguenti formati:

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Esempio

Ecco gli esempi per impostare lo sfondo di un tag HTML:

<!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>

Questo produrrà il seguente risultato:

Sfondo HTML con immagini

Il backgroundl'attributo può essere utilizzato anche per controllare lo sfondo di un elemento HTML, in particolare il corpo della pagina e gli sfondi della tabella. È possibile specificare un'immagine per impostare lo sfondo della pagina o della tabella HTML.

Note- L' attributo background è obsoleto in HTML5. Non utilizzare questo attributo.

Di seguito è riportata la sintassi per utilizzare l'attributo background con qualsiasi tag HTML.

Note- L' attributo background è deprecato e si consiglia di utilizzare il foglio di stile per l'impostazione dello sfondo.

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

I formati di immagine più utilizzati sono le immagini JPEG, GIF e PNG.

Esempio

Ecco gli esempi per impostare le immagini di sfondo di 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>

Questo produrrà il seguente risultato:

Sfondi fantasia e trasparenti

Potresti aver visto molti pattern o sfondi trasparenti su vari siti web. Ciò può essere ottenuto semplicemente utilizzando un'immagine modellata o un'immagine trasparente sullo sfondo.

Si suggerisce che durante la creazione di motivi o immagini GIF o PNG trasparenti, utilizzare le dimensioni più piccole possibili anche piccole come 1x1 per evitare un caricamento lento.

Esempio

Ecco gli esempi per impostare il motivo di sfondo di una tabella:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <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 pattern -->
      <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>

Questo produrrà il seguente risultato: