Couleur, image de fond

Couleur de fond

Pour changer la couleur de fond, on utilise l'attribut background-color=code_couleur;. Par exemple, pour mettre un fond rouge (évitez, mal aux yeux garanti !) dans tout le blog, on ajout cette commande à la suite des précédentes de la classe body :
body    { margin:0px;font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; background-color:#F00; }
Et si vous souhaitez que le fond de vos modules soit vert, c'est le même principe, avec le code couleur qui correspond au vert et la classe liée aux modules :
.box  { width:100%; margin-bottom:10px; background-color:#0F0;}
Exemple : <div style="background-color:#02F4A1;">Ici, le fond est vert. </div>

Ici, le fond est vert.

Image de fond

Pour mettre une image de fond et la positionner comme il se doit, on utilise quatre attributs :

• background-image:url(url_de_l_image_de_fond) ;
• background-repeat: no-repeat; (no-repeat pour que l'image ne se répète pas sur tout le blog, ou repeat-x pour qu'elle se répète uniquement horizontalement, ou repeat-y pour qu'elle se répète verticalement, ou enfin repeat pour qu'elle se répète horizontalement et verticalement)
  
• background-position:bottom left; (top, bottom, center, left, right). Cet attribut n'est pas à utiliser que dans le cas où l'image ne se répète pas. En effet, quand elle se répète, elle va apparaître partout. Tandis que si l'image n'apparaît qu'une seule, on va pouvoir la positionner précisemment... comme ici, en bas, à gauche.
  
• background-attachment : fixed; (scroll ou fixed). Cet attribut permet de déterminer si l'image de fond se déplace en même temps que le texte (scroll) ou si elle reste figée derrière (fixed).
  

Seul le premier attribut est indispensable pour que le fond apparaisse. Les autres sont facultatifs et viennent en complément.
Exemple : <div style="height:80px; color:#F00; background-image:url(url_de_l_image); background-repeat:repeat-x; ">Ici, le fond est une fleur et se répète à l'horizontal. </div>

Ici, le fond est une fleur et se répète à l'horizontal.

<div style="height:80px; color:#F00; background-image:url(url_de_l_image); background-repeat:repeat-x; ">Ici, le fond est une fleur et ne se répète pas. </div>

Ici, le fond est une fleur et ne se répète pas.