[création d'un blog sur overblog] Mettre une image de fond sur le blog

MISE à JOUR vers la version 2 d'Over-Blog

Pour changer le fond d'un blog sur over blog il faut toucher au css. C'est un peu du domaine de la programmation. Mais ce n'est pas bien compliqué.

Voici la marche à suivre :

entrer dans l'administration du blog.

Vérifier que le en mode 'avancé' est activé (sur la page Administration, dans l'onglet 'Configurer', cliquez sur 'mode avancé')


charger l'image que vous comptez mettre en fond de blog. Pour cela aller dans 'Documents' puis 'Images&Albums photos' et là cliquer sur 'Ajouter des images'

Lorsque l'image est chargée, cliquer sur la petite icône en forme de loupe sous l'image. La fenêtre de l'image s'ouvre. Vous verez un lien au dessus de l'image, il s'agit de l'adresse de l'image sur le serveur d'over-blog. Cliquez droit et copiez l'adresse.


Cliquer sur 'Design' (1) puis cliquer sur 'Mode CSS' (2). Cliquez sur Global (3), puis sur "mon style" (4) et enfin, cochez la case 'appliquer ma feuille de style personnalisée' (5).



à ce niveau je vous conseille de copier le texte qui apprait dans la fenêtre, et de le coller dans un coin (bloc note par exemple) et surtout de l'enregistrer. Car si vous faites une mauvaise manipulation, l'apparence du blog risque t'en pâtir...

Tous les css présentés ne se ressemblent pas. Dans mon exemple j'ai choisi le thème "Ice cream pêche", je ne sais pas si cela marche avec les autres thèmes.

Cherchez la section 'Elements generiques' à la ligne 179, puis le terme 'background' (le premier de la liste, en face de 'body'.

1. /* ---------- Elements generiques ------------- */
   
2. body {background:#FFFDF3;color: #3A2C20;}
   
3. a { color:#6F1001; }
   
4. a:hover { text-decoration:underline; color:#3A2C20;}
   
5. .newWindow { color:#FFB36A; }
   
6. .newWindow:hover { color:#FFA026; }
   
7. legend { color:#5675A4; }
   
8. li { list-style-type: square; }
   
9. img { border:0px; }
   
10. input { border:solid 1px #FFB36A; font-size:100%; background:#FFFAE6; color:#FFA026; }
    

Remplacez le code souligné ci-dessus par cette ligne :
background: url(coller ici le lien de l'image) top fixed;
Le terme 'top fixed' permet de fixer l'image, mais si vous voulez qu'elle bouge lorsque vous déplacez la barre de navigation, ne le mettez pas. Personnellement j'ai opté pour fixe, c'est plus agréable.

Les lignes apparaissent donc ainsi :

1. /* ---------- Elements generiques ------------- */
   
2. body {background:url(lien-de-l'image) top fixed;}
   
3. a { color:#6F1001; }
   
4. a:hover { text-decoration:underline; color:#3A2C20;}
   
5. .newWindow { color:#FFB36A; }
   
6. .newWindow:hover { color:#FFA026; }
   
7. legend { color:#5675A4; }
   
8. li { list-style-type: square; }
   
9. img { border:0px; }
   
10. input { border:solid 1px #FFB36A; font-size:100%; background:#FFFAE6; color:#FFA026; }
    

Cliquez sur 'enregistrer'

Faites un petit apperçut de votre blog pour vérifier votre travail.