CSS : Modifier le fond (background) de votre blog

La question qui se pose rapidement lorsqu’on désire modifier le css de son blog, c’est comment modifier la couleur du fond ? Comment insérer une image ?

Cherchez dans votre css l’élément « body »

Vous trouverez quelque chose qui ressemble à ça :

body {margin:0px; padding:0px; background-color: #000000; background-image:url(http://www.monimage.jpg); color:#FFF; font-size:x-small;}

Vous remarquez qu’il y a deux propriétés qui portent le nom de background :

background-color : couleur d’arrière plan

background-image : image d’arrière plan qui vient se placer par dessus le background-color

Et si elles n’y sont pas ou qu’il en manque une, vous pouvez les ajouter. Pour éviter de faire des erreurs de syntaxe (comme par exemple oublier un point virgule), vous pouvez consulter l’article sur la syntaxe du css

La couleur d’abord :

Car même si vous avez une image en background, au chargement de la page il y aura un laps de temps sans image. La couleur du fond sera alors visible en arrière plan. Autant l’adapter au style du blog.

body {background-color:#... ;}

Pour définir la couleur, il suffit de placer un code hexadécimal (voir l’article : les codes hexadécimaux)

Par exemple vous voulez que la couleur de votre fond de page soit rouge, écrivez :

body {background-color:#CC0000 ;}

Modifier ou placer une image en arrière plan d’un blog :

Plusieurs astuces s’offrent à nous…

Votre blog design de base contient déjà une image de fond ? On va voir comment la modifier très simplement (l’exemple suivant utilise le design de base d’over-blog American Beauty grey).

Assurez-vous d’héberger votre image et d’avoir son url (du genre http://monsite/mesimages/image.jpg).

Placez votre souris sur l’image d’arrière plan de votre blog et faites un clic droit.

Allez sur « enregistrer l’arrière plan sous », une fenêtre va s’afficher, relevez le nom qu’elle contient (ici dans l’exemple, c’est « mosaique.png »).

 

Rendez-vous sur votre CSS (avancé) et dans accueil faites F3 (vous savez les touches qui servent pas souvent en haut de votre clavier, sinon vous pouvez toujours rechercher manuellement en ouvrant grands les yeux) une fenêtre de recherche va s’ouvrir. Tapez « mosaique.png » (sans les guillemets) vous allez trouver où se trouve dans le css l’image de fond actuelle. Collez à la place de l'url existante celle de la nouvelle image. Cherchez deux fois (on sait jamais) si ça y est deux fois (c’est possible si le css n’est pas très clair) collez une nouvelles fois l’url de la nouvelle image.

Activez l'option "Je souhaite modifier et appliquer la feuille de style à mon blog" en cochant la croix. 

Enregistrez.  

Vous pouvez aussi ajouter au modifier les éléments dans body :

body {background-image:url(http://www.monsite.fr/mesimages/monimage.png);}

Et pour vérifier les modifications, on n’oublie pas de rafraîchir la page du navigateur, en faisant ctrl+F5...