Cet article détaille les étapes nécessaires pour placer dans l'en-tête de votre blog l'une de vos images publiées.


En résumé


- Aller dans l'éditeur CSS;
- Copier le code correspondant;
- Aller dans le module 'Images' et identifier l'image à placer dans l'en-tête;
- Copier son adresse;
- Coller l'adresse de l'image dans le code CSS;
- Enregistrer;



Editeur CSS

Cliquez sur 'Apparence' puis sur 'Editeur CSS'. Copiez le code ci-dessous dans votre éditeur et enregistrez :
#zone1Header
{
BACKGROUND-IMAGE: url(cheminimage);
HEIGHT: 120px;
}

Cela ressemblera à ceci, en vrai:




Sélection de l'image

Allez ensuite dans le module 'Images'. Repérez l'image que vous souhaitez placer dans l'en-tête. Cliquez-dessus.

Votre navigateur affichera alors dans sa barre d'adresse, l'adresse
exacte de votre image sur Internet. Copiez (clic-droit, copier) la partie située APRES le
nom du domaine, en n'oubliant pas le premier 'slash':




Fin de la modification CSS

Retournez dans l'éditeur CSS. Nous allons cette fois indiquer le chemin exact de votre image.

Dans le code , repérez le texte 'cheminimage'. Remplacez-le par le
chemin de votre image, via un clic-droit, puis 'coller'. Votre devrait
ressembler à ceci, avec un numéro (le numéro de votre blog) et un nom
d'image différents:

#zone1Header
{
BACKGROUND-IMAGE: url(/uploads/20050423133456/fleursbleues.jpg);
HEIGHT: 160px;
}

Finalement, vous pouvez augmenter ou réduire la hauteur de votre
en-tête avec la balise HEIGHT située juste en-dessous. Le nombre
représente la hauteur de l'en-tête en pixels. Modifiez-le et cliquez
sur 'Preview' à gauche pour observer le résultat sur votre blog.

Peut être que vous devrez effectuer plusieurs essais avant de trouver l'hauteur qui vous convient le mieux!


(EDIT) Répétition de l'image

Dans le cas où l'image que vous souhaitez placer en en-tête n'occupe pas toute la largeur (ou hauteur) de la zone, vous pouvez spécifier la manière dont seront effectuées les répétitions.

Vous pouvez au choix demander:
  • une répétition horizontale
  • une répétition verticale
  • une répétition dans les deux axes
  • pas de répétition du tout

L'attribut est ici, comme l'on s'en doute un peu, "background-repeat", que l'on ajoutera respectivement selon la liste ci-dessus:
  • background-repeat: repeat-x;
  • background-repeat: repeat-y;
  • background-repeat: repeat;
  • background-repeat: no-repeat;
Le comportement par défaut est "repeat", à savoir, répétition sur les deux axes.

Un petit exemple, repris du paragraphe précédent, dans lequel on interdit la répétition de l'image:
#zone1Header
{
BACKGROUND-IMAGE: url(/uploads/20050423133456/fleursbleues.jpg);
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 160px;
}



Pour les plus avancés, sachez que les attributs ayant un rapport avec l'arrière-plan (background) peuvent tous être regroupés en un seul attribut. L'exemple précédent deviendrait alors:
#zone1Header
{
BACKGROUND: url(/uploads/20050423133456/fleursbleues.jpg) no-repeat;
HEIGHT: 160px;
}