Arrière-plan HTML

Un bon fond rend le site très bien.

Exemple

Bonne combinaison de couleur de fond et de couleur de texte
Un exemple de bonne combinaison de couleur de fond et de couleur de texte, rendant facile la lecture des textes sur la page.
Mauvaise combinaison de couleur de fond et de couleur de texte
Un exemple de mauvaise combinaison de couleur de fond et de couleur de texte, rendant difficile la lecture des textes sur la page.

(Vous pouvez trouver plus d'exemples en bas de cette page)

Fond (Backgrounds)

<body> a deux balises pour configurer le fond. Le fond peut être une couleur ou une image.

Couleur de fond (Bgcolor)

L'attribut de couleur de fond définit le fond en couleur. La valeur de l'attribut peut être un nombre hexadécimal, une valeur RGB ou un nom de couleur.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Le code ci-dessus définira la couleur de fond en noir.

Fond (Background)

Les attributs de fond définissent le fond en image. La valeur de l'attribut est l'URL de l'image. Si la taille de l'image est inférieure à la taille de la fenêtre du navigateur, l'image sera répétée tout au long de la fenêtre du navigateur.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

L'URL peut être une adresse relative, comme dans la première ligne de code. Elle peut également être une adresse absolue, comme dans la deuxième ligne de code.

Astuce :Si vous envisagez d'utiliser une image de fond, vous devez garder à l'esprit quelques points :

  • L'image de fond a-t-elle augmenté le temps de chargement de la page ? Astuce : les fichiers d'image ne devraient pas dépasser 10k.
  • L'image de fond est-elle bien coordonnée avec d'autres images de la page ?
  • L'image de fond est-elle bien coordonnée avec la couleur du texte de la page ?
  • L'image, après avoir été répétée dans la page, a-elle encore l'air bien ?
  • Est-ce que l'attention portée au texte est déviée par l'image de fond ?

Principales considérations - Conseils utiles :

Les attributs de couleur de fond (bgcolor), de fond (background) et de texte (text) du tag <body> ont été abandonnés dans les normes HTML les plus récentes (HTML4 et XHTML). W3C a supprimé ces attributs dans leurs recommandations.

Il convient d'utiliser les feuilles de style en cascade (CSS) pour définir la mise en page et les attributs d'affichage des éléments HTML.

Plus d'exemples

Image de fond utilisable
Exemple où l'image de fond et la couleur du texte rendent le texte de la page facile à lire.
Image de fond utilisable 2
Un autre exemple où l'image de fond et la couleur du texte rendent le texte de la page facile à lire.
Image de fond inutilisable
Exemple où l'image de fond et la couleur du texte rendent le texte de la page difficile à lire.