Contenu de cet article :

Pour changer la couleur du fond de page ou y appliquer une image qui se répète, tout se passe dans la règle de body :

body {
	font : 86%/130% arial,"Lucida Grande","Trebuchet MS", sans-serif;
	background : #f0f0f0;
	color:#222;
    }

Un fond de fenêtre de couleur uniforme…

La ligne background : #f0f0f0; détermine actuellement un fond uniforme de couleur gris pâle. Pour modifier cette couleur il suffit d'indiquer le code hexadécimal correspondant à la couleur souhaitée. De nombreux sites permettent de choisir des couleurs, quelques-uns d'entre eux sont listés parmi les liens Dotaddict.org. Exemple pour un fond bleu clair :

	background : #cce0f0;

En voici le résultat :

exemple avec fond #cce0f0

… ou avec un motif répétitif

Pour un motif répétitif, placer l'image de ce motif dans le répertoire /kit2/images/ puis modifiez la ligne background ci-dessus de la façon suivante :

  	background : #f0f0f0 url(images/fond_motif.gif);

En voici le résultat :

exemple avec motif de fond

Et pourquoi pas bicolore ?

Si vous souhaitez que la couleur « débordant » de la page ne soit pas la même à gauche et à droite, procédez comme suit :

  1. fabriquez une image de 1600px de large et quelques pixels de haut avec une couleur sur la moitié gauche et une autre sur la moitié droite
  2. placez-la dans le répertoire /kit2/images/
  3. remplacez la ligne de background par :
  	background : #f0f0f0 url(images/fond_bicolore.png) top center;

En voici un exemple :

exemple avec image de fond bicolore

Sur le même principe de construction et de placement vous pouvez utiliser des motifs différents à gauche et à droite, etc.

Les images fond_motif.png et fond_bicolore.png sont disponibles dans le répertoire zegoodies.