Arrière-plan d'une page
balise HTML concernée : <BODY>
attributs mis en oeuvre : bgcolor et background
Arrière-plan coloré :
Pour définir une couleur d'arrière-plan, on utilise l'attribut bgcolor.
<BODY bgcolor="blue" >
<BODY bgcolor="#000099"
>
<BODY bgcolor= rgb (240, 245, 128)
>
L'attribut bgcolor définit la couleur de fond en l'absence de texture
Par défaut, cet arrière-plan est blanc ou gris.
Attention : Veiller à bien adapter la couleur du texte pour qu'il reste lisible sur
la couleur de fond choisie !
Images d'arrière-plan ( texture) :
Pour définir une image d'arrière-plan, on utilise l'attribut background.
<BODY background="image.gif" >
<BODY background="http://www.jurixt.com/acier/image.gif" >
où image.gif est le fichier graphique utilisé en tant que "papier peint".
C'est sur ce "papier peint" que s'inscriront alors le texte et les images de la page.
Important : en HTML pur, les dimensions d'une
image de fond ne peuvent être changées !
L'attribut HTML background a la particularité de placer
automatiquement, sans spécification supplémentaire , l'image en arrière-plan. Tous les autres
éléments de la page s'afficheront donc au-dessus, en avant-plan.
Il a aussi une autre particularité : celle de répéter l'image horizontalement et verticalement afin
de remplir (tapisser) le fond de la page, comme une mosaïque.
Ce deuxième type d'arrière-plan doit être mis en oeuvre avec prudence pour éviter :
- des fonds surchargés
- une lecture laborieuse du texte
- des contours des pièces de la mosaïque trop tranchés.
Bien souvent, pour une page Web, un fond neutre, sera plus agréable. En règle générale, un fond
d'écran doit être attirant mais discret.
Il est possible d'utiliser n'importe quelle image au format GIF ou JPG en tant que motif (
texture ) d'arrière-plan.
Veiller cependant à choisir des motifs dont l'assemblage sera amélioré si leurs contours
s'harmonisent parfaitement. ( si nécessaire, apporter des retouches sur les bords de l'image
d'origine à l'aide d'un outil graphique tels que PSP ou Photoshop ).
De telles images assurent une continuité visuelle quand elles sont assemblées bord à bord, ce
qui donne l'illusion d'un fond formé d'une seule image.
Les outils graphiques proposent généralement une méthode simple pour transformer des textures
en motifs facilement juxtaposables. Cette technique de retouche d'images pourra faire l'objet
de topos dans le groupe "fr.software.son-image".
Au lieu d'une petite image qui sera répétée en mosaïque, on peut aussi utiliser une grande
image de couleur neutre ou transparente. Le coin supérieur gauche est alors l'emplacement
idéal pour faire démarrer une image de ce type, car il est très difficile, en HTML pur, de
contrôler avec précision la largeur et la hauteur en pixels de la page, qui peuvent différer
selon le navigateur, selon la configuration de l'utilisateur.
Le coin supérieur gauche est le coin le plus stable d'une page
Web.
( Des solutions très précises et universelles existent cependant avec l'utilisation conjointe
des feuilles de styles et des scripts, nous y reviendrons ultérieurement)
Défilement de la page :
Lors du défilement de la page au moment de sa visualisation, les motifs de fond défilent également.
Internet Explorer, permet cependant de figer le fond pendant le défilement du texte, grâce
à l'attribut bgproperties qui semble être abandonné au profit de
l'attribut background-attachment des feuilles des style)
Questions:
Si une texture est définie avec l'attribut background, faut-il
quand même définir une couleur de fond avec l'attribut bgcolor ?
En principe non. La texture recouvrant entièrement la page, la couleur de fond devient inutile.
En pratique, pour parer à toute éventualité, je serai d'avis, de définir quand même une couleur de
fond et de faire cohabiter les deux attributs , dans la mesure où c'est sans conséquence sur le
fonctionnement de la page.
Pages Web , messages de News, est-ce du pareil au même
?
Je pense qu'il est préférable de distinguer les pages créées pour le Web et celle créées pour un
message de news. Non pas d'un point de vue essentiellement technique : le code pouvant être, très
souvent, exactement le même, mais plutôt du point de vue finalité et esthétique.
L'utilisation des images d'arrière-plan est un exemple frappant de cette différence :
pages Web :
- jamais de fond surchargé
- priorité à la lisibilité du texte
- importance de la rapidité d'affichage de la page
message :
- le fond peut être plus important que le texte
- la rapidité d'affichage n'est pas prioritaire
Pages exemples :
Cliquer sur les cases correspondantes