Fond de fenêtre
Par Kozlika, dimanche 6 novembre 2005 à 09:41 :: Personnalisations :: #4 :: rss
Sauf si vous avez choisi une largeur fluide à 100% pour l'affichage du blog, un fond apparaît sur les côtés. On peut habiller ce fond avec une couleur uniforme, un motif répétitif ou, pouquoi pas, une couleur à gauche et une autre à droite.
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-size : 76%; margin : 0; padding : 0; text-align : center; background : #acbabf; color:#222; font-family:"Lucida Grande", optima, "Trebuchet MS", sans-serif; }
Un fond de fenêtre de couleur uniforme...
La ligne background : #acbabf;
détermine actuellement un fond uniforme de couleur gris bleuté. 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 sur le Petit DotClear illustré. Exemple pour un fond dans une autre nuance de gris :
background : #babfac;
En voici le résultat :
... ou avec un motif répétitif
Pour un motif répétitif, placer l'image de ce motif dans le répertoire /kit1/images/
puis modifiez la ligne background ci-dessus de la façon suivante :
background : #babfac url(images/overall.gif);
En voici le résultat :
Note : pour ce fond j'ai utilisé une couleur de fond bleue avec une image semi-transparente répétitive que vous pouvez récupérer dans le répertoire zegoodies
si vous le souhaitez. CitrusMoon en propose de nombreux (semi-transparents dans la rubrique overalls ou opaques dans la catégorie bloggrounds) très beaux, je vous recommande vivement ce site.
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 :
- 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
- placez-la dans le répertoire
/kit1/images/
- remplacez la ligne de
background
par :
background : #babfac url(images/bicolore.png) top center;
(Vous pouvez récupérer cette image dans le répertoire zegoodies
.)
Sur le même principe de construction et de placement vous pouvez utiliser des motifs différents à gauche et à droite, etc.