Modifier le fond des articles et modules

Texte Libre

Lundi 11 février 2008

Modifier le fond des articles et modules

Modifier le fond d'un article ou d'un module consiste à modifier la propriété background (ou pour être plus précis background-color ou background-image) de l'élément dans le CSS.

Voici les noms des différents éléments modifiables :

MODULES

.box {} /*le module entier*/
.box-titre {} /*le titre du module*/
.box-content {} /*le contenu du module*/
.box-footer {} /*le pied du module*/

ARTICLES

.article {} /*l'article entier*/
.contenuArticle {} /*le contenu de l'article*/
.divTitreArticle {} /*le titre de l'article*/

On choisira de mettre une couleur ou une image en fond.

Pour modifier la couleur de fond de tout un article par exemple, on écrira :

.article{background:#000000;} /*le code #000000 correspond à la couleur noire*/

Pour insérer une image (comme le fond de cet article), il faut dans un premier temps trouver une image qu'on puisse répeter pour que le fond s'adapte bien à tous les articles selon leur longueur.

Sur ce blog par exemple, les articles font tous 585 pixels de large mais pas tous la même hauteur. J'ai donc pour fond d'article une image de 585 pixels de large et de 5 pixels de hauteur qui se répète sur la hauteur !

Pour insérer une image comme fond pour tous les articles, on écrira:

.article{background:url(http://url_de_l_image_de_fond); background-repeat:repeat-x;}

/*l'image se répète dans la largeur*/

.article{background:url(http://url_de_l_image_de_fond); background-repeat:repeat-y;}

/*l'image se répète dans la hauteur*/

.article{background:url(http://url_de_l_image_de_fond); background-repeat:repeat;}

/*l'image se répète dans la largeur et la hauteur*/

.article{background:url(http://url_de_l_image_de_fond); background-repeat:no-repeat;}

/*l'image ne se répète pas*/

Veillez à ne pas effacer ce qui est entre les accolades avant votre modification !
Si la propriété background ou background-color ou background-image est déjà présente, vous pouvez bien sûr l'effacer mais seulement celle-ci !!!

VOS QUESTIONS

J'ai mis une image dans .box-titre (le titre) mais le texte du titre se retrouve collé tout en haut, comment faire pour le mettre au milieu en hauteur?

Il faut préciser la hauteur de ligne, c'est à dire à partir de combien de pixel de haut on commence à écrire. Par exemple, si ton image fait 40px de hauteur, on précisera dans .box-titre {...; line-height:30px;} .

J'ai ajouté une image en fond de titre des modules (.box-titre) mais elle est coupée? Comment faire?

Par défaut, la hauteur de la partie .box-titre s'adapte à la hauteur du texte, et non à l'image. Il faut donc imposer une hauteur à .box-titre en utilisant la propriété height.