ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  FIN DE PAGE |  INDEX

Arrière-plan d'une page Valid HTML 4.01 Transitional


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" >
 
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 :
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 :
message :

Pages exemples :

Cliquer sur les cases correspondantes

             

ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  DEBUT DE PAGE |  INDEX