Couleur, image de fond

Publié le par Titia

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.

Publié dans Aides diverses

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
B

Bonjour Titia, merci pour ce tuto.



Je suis en version 1 chez OB et je voudrais faire un background : fixed pour l'image de fond que j'ai insérée, mais je ne sais pas s'il faut que j'aille dans le CSS de l'accueil, des articles ou
des pages (je penche vers l'accueil); il n'y a pas de "global" dans cette version.


Je me demandais aussi si je pouvais changer l'image de fond ensuite ou si le système ne permet pas de revenir aux modifications hors CSS.


De plus, j'aimerais savoir quoi faire après avoir validé : dois-je désactiver le mode CSS ? Puis-je passer directement à une autre fonction ou un autre menu ?


Merci d'avance.
Répondre
H
J'aimerais avoir un fond de page comme le tien (image de cahier d'écolier). Mon blog est destiné à des étudiants. tu peux m'aider pour ça?
Répondre
T

Ben, comme expliqué dans l'article, il faut d'abord trouvé une image... et ensuite modifié le css.
Tu bloques à quelle étape ?


A
C'est quoi l'url de l'imageRéponder moi par mail svp
Répondre
T
Je ne réponds pas par mail. Soit tu reviens voir la réponse toi-même, soit ça ne t'intéresse pas vraiment et dans ce cas tant pis pour toi ! Pour ceux que ça intéresse : http://www.peutetreunereponse.net/article-805898.html
E
Je suis d'accord avec toi,  est ce que c'est dans le .box qu'il faut mettre les encadrés bleu? je t'avoue que je ne sais pas comment faire. je te rassure je n'avais pas l'intention de te dépouiller. c'est parce que c'était un modèle que je me suis permise. tu as raison je vais les télécharger sur mon blog.Merci
Répondre
T
Le mieux est de mettre l'image dans .box-top. Et comme je te l'ai dit, tu as le droit d'utiliser cette image (je m'en fous parce que c'est un exemple), c'est juste que c'est mieux si c'est stocké chez toi ^^ ! Non parce qu'il m'arrive parfois de faire du ménage dans mes fichiers et d'en supprimer quelques-uns ^^ !
E
Bonsoir Titia,Quand je te parle de l'encadré bleu, l'encadré dans lequel j'ai inscrit : "nos rubriques", "présentation" " articles récents" etc...je souhaite en fait que chaque encadré soit intégré à la photo des nuages (le fond du module) ou si c'est pas possible avoir une astuce.Merci
Répondre
T
Hé bien, il faut intégrer le haut de la photo des nuages à l'encadré bleu.Au passage, je n'avais pas fait attention, mais j'ai vu que tu avais pris "mes" encadrés bleus... Ca m'est égal que tu les prennes (ceux-ci sont des exemples... Par contre, je refuse qu'on prenne ceux que j'ai sur mes deux blogs ^^), mais, ça serait mieux que tu les stockes dans "tes" fichiers... Car j'ai failli les virer un jour... Si je le fais, tu n'auras plus tes encadrés de modules !En règle générale, il faut toujours stocker les images de son blog soi-même... Ca évite des catastrophes quand le propriétaire les supprime ou les déplace :)