// Arrière-plan _____

à jour le
16 mars 2007

Eric Pichon  

 

suite...voir lien en bas de page

 

Lorsqu'on ne précise pas de motif, ni de couleur d'arrière-plan pour une page, celle-ci adopte les préférences de l'internaute

exemple : modifiez les paramètres de votre navigateur en changeant la couleur de fond et reconsultez cette page.

En écrivant votre page, vous pouvez en revanche préciser le fond que vous souhaitez pour une page : il peut s'agir d'une image ou d'un fond coloré.
On pourra définir ceci dans la feuille de style du site :

Exemple dans une feuille de style
body{ l'arrière-plan de la page est défini pour la balise body

Image en arrière-plan
background-image:
url(/images/fond.gif) ;

l'url indique l'emplacement de l'image d'arrière plan

background-repeat:
repeat-y;

background-attachment:
scroll;

background-position:
left top;
[ position h. position v.]

background-repeat peut prendre les valeurs :

  • repeat : l'image de fond se répète en mosaïque pour couvrir toute la page :
    il faut donc choisir une image uniforme ou suffisamment large (1024 pixels ce qui correspond à la résolution maximale en largeur des écrans actuels) ;
  • no-repeat : l'image ne sera pas répétée :
    veillez cependant à ce que l' image ne soient pas trop lourde pour ne pas ralentir le chargement de la page.
  • repeat-x : l'image se répétera sur la largeur de l'écran mais pas sur sa hauteur
  • repeat-y : l'image se répétera sur la hauteur de l'écran mais pas sur sa largeur
Si l'image ne se répète pas en mosaïque, on pourra définir sa position par rapport à la page

Arrière plan coloré
background-color:
#ffcccc
[L'identifiant de la couleur ]

Il faut prévoir aussi qu'il est possible que l'image d'arrière-plan ne s'affiche pas : dans ce cas elle devra être remplacée par un fond coloré d'une teinte approchante.

 
suite couleur  
retour en haut de la page

On peut trouver des images de fond ("textures") sur de nombreux sites ou la créer soi-même dans un éditeur d'images (photoshop, par ex.). L'image ne doit pas gêner la lisibilité du texte : le motif d'arrière-plan doit être très léger.


Creative Commons.. BY:NC:SA: -Paternité : ce site peut être reproduit et distribué à condition que l'auteur initial, eric pichon, soit cité.- Non commercial : aucune adaptation, reproduction ou utilisation de ce site ne peut être faite à des fins commerciales, sans accord de l'offrant ('licensor') - Partage à l'identique : des adaptations de ce site ne peuvent être diffusées que sous une autorisation identique. A chaque réutilisation ou distribution, vous devez faire apparaître clairement aux autres les conditions contractuelles de mise à disposition de cette création.

retour en haut de la page - une autre page >