« 2005-11 | Page d'accueil | 2006-01 »

06.12.2005

Image d'arrière plan dans un billet

Comme promis, je consacre ce poste à l'utilisation d'image d'arrière plan dans un blog, et plus précisément, l'utilisation d'une background-image dans un billet.
D'abord, il faut créer une image de dimensions raisonables par rapport à l'espace que prend la partie principale de votre blog, celle où s'affiche le contenu de vos billet (partie centrale sur A_To_Z), de manière à ce qu'elle puisse apparaitre en totalité sur le fond, puis, et dans votre feuille de style principale,  insérez le code suivant :

.monFond{ background: transparent url("URL de votre image de fond") no-repeat left center; }



Ensuite et pour afficher votre image d'arrière-plan derrière le texte de votre billet, comme j'ai fait pour ce poste, il vous faut appeler le style que vous venez de créer, "monFond", et pour se faire, insérez juste le code qui suit; à partir de l'éditeur HTML de votre blog :>div class="monFond"<..le texte pour lequel vous voulez appliquer un fond va ici...., puis fermez le div après le texte en insérant : >/div< *

 


 *N.B : Les balises div d'ouverture et de fermeture doivent être contenu entre les signes ("<" puis ">" ) et non (">" puis "<"), sans les guillemets bien sûr; j'ai choisi de les inverser pour pouvoir les insérer à l'intérieur de ce billet et afin qu'il ne soient pas interprétées par le navigateur comme étant du code html.
Astuce : Si vous mettez une image de petite taille et vous voulez qu'elle se répéte, changez tout simplement le paramètre "no-repeat", dans le style 'monFond' par "repeat" pour une répétion sur les deux axes horizontal et vertical, "repeat-x" pour un répétition sur l'axe horizontal, ou encore "repeat-y" pour une répétition verticale.

20:05 Publié dans Design | Lien permanent | Commentaires (10) | Envoyer cette note

 
© a to z blogging all rights reserved