HTML - Arrière-plans

Par défaut, l'arrière-plan de votre page Web est de couleur blanche. Vous n'aimerez peut-être pas ça, mais pas de soucis. HTML vous propose deux bonnes façons de décorer l'arrière-plan de votre page Web.

  • Arrière-plan HTML avec des couleurs
  • Arrière-plan HTML avec images

Voyons maintenant les deux approches une par une en utilisant des exemples appropriés.

Fond HTML avec des couleurs

le bgcolor L'attribut est utilisé pour contrôler l'arrière-plan d'un élément HTML, en particulier le corps de page et les arrière-plans de tableau.

Note- L' attribut bgcolor est déconseillé en HTML5. N'utilisez pas cet attribut.

Voici la syntaxe pour utiliser l'attribut bgcolor avec n'importe quelle balise HTML.

<tagname bgcolor = "color_value"...>

Cette couleur_value peut être donnée dans l'un des formats suivants -

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

Exemple

Voici les exemples pour définir l'arrière-plan d'une balise 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>

Cela produira le résultat suivant -

Fond HTML avec des images

le backgroundL'attribut peut également être utilisé pour contrôler l'arrière-plan d'un élément HTML, en particulier le corps de page et les arrière-plans de tableau. Vous pouvez spécifier une image pour définir l'arrière-plan de votre page ou tableau HTML.

Note- L' attribut background déconseillé en HTML5. N'utilisez pas cet attribut.

Voici la syntaxe pour utiliser l'attribut d'arrière-plan avec n'importe quelle balise HTML.

Note- L' attribut background est obsolète et il est recommandé d'utiliser la feuille de style pour le réglage de l'arrière-plan.

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

Les formats d'image les plus fréquemment utilisés sont les images JPEG, GIF et PNG.

Exemple

Voici les exemples pour définir des images d'arrière-plan d'une table.

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

Cela produira le résultat suivant -

Arrière-plans à motifs et transparents

Vous avez peut-être vu de nombreux motifs ou arrière-plans transparents sur divers sites Web. Ceci peut simplement être réalisé en utilisant une image à motifs ou une image transparente en arrière-plan.

Il est suggéré que lors de la création de motifs ou d'images GIF ou PNG transparentes, utilisez les plus petites dimensions possibles, même aussi petites que 1x1 pour éviter un chargement lent.

Exemple

Voici les exemples pour définir le motif d'arrière-plan d'une table -

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

Cela produira le résultat suivant -