Comment mettre une image en arrière plan dans Blogger (image de fond).

Par défaut l’arrière plan d'un blog Blogger/Blogspot est une couleur ($bgcolor;) que vous pouvez changer à partir de "Mise en page" / "Polices et couleurs".
Grâce à ce tutoriel vous pouvez utiliser l’image de votre choix comme arrière plan.
Donc la première chose à faire est de choisir une image et de l’héberger dans un site comme Photobucket ou Picasa.


Première étape :
Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets" et repérez un code qui ressemble à celui-ci:
body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
Nous nous intéresserons uniquement à la ligne background:$bgcolor; (selon les Templates vous pouvez avoir: backbround: #.... ou background: url('http://www.................jpg') ).

Deuxième étape :
Choisissez la disposition que vous voulez donner à votre arrière plan et remplacez la ligne background:$bgcolor; en précisant l’url de votre Image.
  • background:url(URL DE VOTRE IMAGE.jpg);

LeBlogger.com

Arrière plan dans Blogger


  • background:url(URL DE VOTRE IMAGE.jpg) repeat-y;

LeBlogger.com

Arrière plan dans Blogger


  • background:url(URL DE VOTRE IMAGE.jpg) repeat-x;

LeBlogger.com

Arrière plan dans Blogger


  • background: #FF00FF url(URL DE VOTRE IMAGE.jpg) repeat-x;

LeBlogger.com

Arrière plan dans Blogger


  • background: url(http://stuff.pyzam.com/layouts/img/m/i/mqmidwestskies.jpg) no-repeat; background-attachment: fixed;    (Il faut utiliser une très grande image.)

LeBlogger.com

Arrière plan dans Blogger

Par défaut l’image de fond s’affiche en haut à gauche, vous pouvez choisir une position différente en ajoutant un de ces paramètres :
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
Exemple :
background:url(http://blogspot.leblogger.com/divers/Bkgrd.png) repeat-y top right;
Libellés : Publié le dimanche, juillet 26, 2009
158 Commentaires
  1. Coucou j'attendais ce tuto depuis longtemps, tu devrais aussi nous donner des belles images pour les mettre directement
    merci c'est super.

    RépondreSupprimer
    Réponses
    1. merci c'est

      http://personnaliser-blogger.blogspot.com/

      Supprimer
  2. Après quelques recherches ce matin, j'ai réussi à fixer l'arrière plan en insérant cette ligne

    background-attachment: fixed;

    RépondreSupprimer
  3. coucou Soufiane,

    et bien lorsque je mets ce code background:url(URL DE VOTRE IMAGE.jpg);

    mon image de fond apparait, mais plusieurs fois, et je souhaiterais qu'elle n'apparaisse qu'une fois, or, dès que je rajoute quelque chose derrière le code, que ce soit no-repeat ou repeat-x ou n'importe quel autre code comme indiqué dans ton tuto, là ca ne fonctionne plus et j'ai un fond tout blanc .... que dois je faire ? merci !!!!

    RépondreSupprimer
  4. @ Ptit fred
    Merci j'avais oublié d'ajouter ça.

    RépondreSupprimer
  5. @ Alexandrah
    Il faut utiliser le code de la dernière image.
    Essai par exemple ça :

    background: url(http://stuff.pyzam.com/layouts/img/m/i/mqmidwestskies.jpg) no-repeat; background-attachment: fixed;

    Essai d'abord sans changer l'adresse de l'image.
    Et fait attention au point virgule ;

    RépondreSupprimer
  6. super ! c génial, ca marche , merci beaucoup Soufiane !;-)

    RépondreSupprimer
  7. Merci pour l'astuce qui m'a permis de fixer mon background :)

    J'ai cependant un problème avec mon arrière-plan qui "défile à l'infini" quand je scroll vers le bas, est-ce lié ?

    RépondreSupprimer
  8. @ Vouvou
    Je vais essayer de t'expliquer mais enregistre ton Template avant.


    Sur le même principe pour modifier l'arrière plan du blog tout entier.

    Recherche: #outer-wrapper {
    et modifie son background (c'est toute la partie marrons foncé)

    Et fait la même chose avec #main-wrapper { (la barre de gauche) et #sidebar-wrapper { (les deux barre de droite)

    C'est très simple à faire mais attention quand même et enregistre ton blog avant.

    RépondreSupprimer
  9. Je crois que je me suis mal exprimée ...Ce n'est pas mon background qui défile, mais l'arrière-page avec les gadgets et messages, qui finit par disparaitre et ne laisse apparaitre que le background.

    RépondreSupprimer
  10. @ Vouvou
    Si tu veux qu'il soit totalement transparent il suffit d'enlever la ligne background:#....;

    pour une transparence partielle,
    Par exemple tu ajoutes ce code après le side wrapper :

    #sidebar-wrapper {
    background-color: white;
    opacity:.550;
    filter: alpha(opacity=50);
    -moz-opacity: 0.50;

    RépondreSupprimer
  11. Je ne cherche pas la transparence totale, mais seulement partielle, et garder l'affichage de mes messages et gadgets en visibilité totale...

    Dans ton exemple, c'est la sidebar qui devient transparente, mais ce n'est pas ce que je veux...

    Je vais tâcher de mettre une image pour que ce soit vraiment compréhensible ^_^

    RépondreSupprimer
  12. Alors voilà :
    1ère image: mon site tel qu'il est en ce moment http://img12.imageshack.us/img12/7237/vouvoutouch.jpg
    2ème image: tel qu'il apparait après avoir mis le code opacity dans outer-wrapper http://img12.imageshack.us/img12/6053/vouvoutouchtouttransluc.jpg
    et 3ème image,: ce que j'aimerai obtenir :) http://img12.imageshack.us/img12/825/vouvoutouchtranslucide.jpg

    RépondreSupprimer
  13. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  14. coucou !! comment est il possible de mettre une image (différente de l'image de fond) dans la barre menu des liens (qui se trouve en haut des articles et en-dessous de la bannière) ou dans la colonne de droite ?

    RépondreSupprimer
  15. @ Alexandrah
    c'est un peu plus compliqué ça. Cette barre de menu est sensé être simple. Pour avoir un arrière plan (image) il faut ajouter une feuille de style dans le code HTML.
    Par contre tu peux combiner lien Texte /lien image facilement.

    RépondreSupprimer
  16. @ Alexandrah
    Je vais publier bientôt d'autres Barre de menu, que tu pourras avec l'explication pour changer l'arrière plan.
    ça va me prendre beaucoup de temps ici et comme je t'ai dit c'est pas fastoche avec la version simple.

    RépondreSupprimer
  17. Pas de solution pour mon problème d'opacité ? :(

    RépondreSupprimer
  18. @ Vouvou
    je vois pas ce que je peux faire de plus, dsl :((

    RépondreSupprimer
  19. j'arrive pas a faire entrer larriere plan , meme apres avoir bien lu le tuto...

    RépondreSupprimer
  20. @ mikku
    dans ton code HTML il y a

    body {
    background:black;

    Il suffit de modifier la ligne background ???

    RépondreSupprimer
  21. Pas grave, merci tout de même Soufiane ;)

    RépondreSupprimer
  22. mais jai suivi exactemenant ce quil fallait mais limage napparait pas :(

    RépondreSupprimer
  23. esquil fait mettre le lien de limage apres le mot background ou on remplace a partir du mot background jusqua color ??

    RépondreSupprimer
  24. ah cest bon sa marhce, en faite je nutiliser pas le bon hebergeur dimages

    RépondreSupprimer
  25. @ mikku
    tu peux utiliser photobucket c'est très bien.

    RépondreSupprimer
  26. Je souhaite mettre une photo en haut et changer ses dimensions (élargir et moins de hauteur). Est-ce possible ? si oui comment ?
    http://dialogosmary.blogspot.com/

    RépondreSupprimer
  27. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  28. Salut Soufiane,
    Sa fonctionne avec Firefox, Safari, Chrome, et devine ou sa ne fonctionne pas, IE.
    Si tu veux regarde par toi même

    http://rapidebloger.blogspot.com/

    Si tu as un idée?

    RépondreSupprimer
  29. Bonjour, alors moi je ne comprend pas .
    J'ai suivi avec attention tout ce que tu as expliqué, mais ca ne marche pas . Mon fond d'écran devient tout blanc et je n'arrive pas a y remédier .

    Je suis l'exemple de :
    •background:url(URL DE VOTRE IMAGE.jpg);

    Mais je n'y arrive pas.

    Aidez moi =(

    RépondreSupprimer
  30. @ babac2
    il faut laisser ton blog ou commenté en utilisant ton adresse email ou l'url de ton blog pour que je puisse t'aider.

    Je crois que ton arrière plan est transparent (pas blanc) parce que tu as du mal copier le code.

    RépondreSupprimer
  31. salut a tous!

    Enfin une page de problemes et de ses resolutions interressante.

    J'aimerai vous soumettre une question aussi passionante que vos precedentes questions:
    Comment peux t-on suprimer l'espace horizontale par defaut qui apparait entre chaque image. En d'autres termes, comment coller ou scinder (pour etre plus precis...), des images.

    RépondreSupprimer
  32. @ un electron
    de quelle images tu parles ? en arrière plan ou dans les Articles et les widget ???

    RépondreSupprimer
  33. je souhaiterais changer l'image de fond de mon blog à 3 colonnes mais je n'y arrive pas.
    comment faire?

    RépondreSupprimer
  34. @Sebastom13
    Changer l'image à 3 colonnes ??? j'ai pas compris !!!!

    RépondreSupprimer
  35. Bonjour Soufiane le Sauveur! ;;)

    Alors, sur quelle ligne je dois changer le background blanc pour avoir une bordure de couleur sur l'article?

    Merci beaucoup !

    Julie

    #main-wrap2 {
    float:left;
    width:100%;
    background:#FFFFFF




    padding:10px 0 0;
    }

    #main {
    background:#FFFFFF;
    padding:0;


    width:635px;

    RépondreSupprimer
  36. @Jukylie
    Pour avoir un bordur, il faut ajouter cette ligne :

    border: solid 2px #DEDEDE;

    (tu peux ajouté un border-right, left, top, bottom.)
    Je pense que ça va bien marché si tu l'ajoute après :

    #outer-wrapper {
    width:940px;
    margin:0 auto;

    ça marche ???

    RépondreSupprimer
  37. Ouais mais là ca donne une bordure sur tout autour (bannière, article, barre de droite..) Moi je voudrais savoir comment faire la bordure seulement autour de l'article :) tu vois celui à 635 px :)

    RépondreSupprimer
  38. Dis Soufiane, j'ai une 2e question mais je m'y perds un peu sur ton site je sias pas très bien si je dois aller voir dans les catégories pour te la poser. de toute façon je suis sure que tu as déjà fait un article dessus:
    Voilà je voudrais savoir comment faire pour changer la petite image du "B" orange de blogger par un dessin de mon choix à coté de la barre d'adresse de mon blog? Comme toi tu as fait pour ta ptite photo..

    Merci! :D

    Jukylie

    RépondreSupprimer
  39. @Jukylie
    Pour la petite photo, c'est une Favicon ;;) c'est très facile a mettre en place regard ici : http://www.leblogger.com/2009/06/favicon-icon-blogger.html

    Pour le "border" comme pour l'arrière plan, essai d'ajouté la ligne dans les trois code pour voir ce que ça donne.

    RépondreSupprimer
  40. Salut Soufiane
    Encore Merci pour ton site qui déchire :p
    Mais je n'arrive pas a mettre une image de fond sur mon blogspot
    Le code HTLM, que tu dit je n arrive pas a le trouver.

    Merci de ta réponse

    RépondreSupprimer
  41. C'est peut être la template de mon blogspot qui empêche l'ajout d'une image de fond.

    RépondreSupprimer
  42. C'est Impossible qu'il n'est pas de : body { dans ton code HTML, c'est quoi l'adresse de ton blog ;)

    RépondreSupprimer
  43. Bonsoir, Merci de m'avoir répondu en faite si il y a le body dans le HTLM, mais je ne voit pas la suite ...

    Voila ce qu'il y a après le body:


    body {
    position: relative; /* Fixes browser resizing bug in IE6 */
    margin: 10px auto;
    width: 980px;
    font-family: 'trebuchet ms', arial, sans-serif;
    text-align: center; /* IE Centering Technique */
    background: #000;
    }

    Voila mon blogspot http://tousillicite-exclu.blogspot.com/

    RépondreSupprimer
  44. Donc c'est bon, tu n'as qu'a remplacé la ligne background: #000; ;)

    Par contre, tu dois aussi modifier l'arrière plan des autres section pour avoir quelque chose de coérant.

    RépondreSupprimer
  45. Oep, malheureusement je doit modifier tout les autre arrière plans pour avoir un résultats, cohérent comme tu le dit :p

    Je croit bien que je vais abandonner, trop compliqué pour moi sa :))

    RépondreSupprimer
  46. Tu peux t'entrainer avec un blog teste et sauvegarder ton blog, ton Thème, tes Widgets .....

    RépondreSupprimer
  47. merci de me renseigner ou je peux trouver l'url de l'image que je veux mettre en arriere plan

    RépondreSupprimer
  48. @Claudine
    Tu peux héberger tes photos dans photobucket.com ou avec MyDataNest 10 GB d'espace de stockage et 20 GB de bande passante...

    RépondreSupprimer
  49. Bonsoir,

    J'ai réussi à mettre un arrière plan comme je le voulais, mais le cadre autour du titre me dérange, y a-t il un moyen pourqu'il soit invisible ? Car d'habitude je le mettais de la couleur du fond, mais là le fond n'est pas uniforme.

    Merci =)

    RépondreSupprimer
  50. @Helene
    Dans ton code HTML recherche ça :
    #header-wrapper {
    margin:0 2% 10px;
    border:1px solid #b3b3b3;
    }
    #header-inner {
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    }
    #header {
    margin: 5px;
    border: 1px solid #b3b3b3;
    text-align: center;
    color:#ffffff;

    et enlvèle les deux ligne "border" =))

    RépondreSupprimer
  51. Super, ca marche parfaitement, merci beaucoup !

    RépondreSupprimer
  52. Bonjour Soufiane !
    Merci pour toute ces infos !
    Je suis en train de changer le design de mon blog, j'ai récupéré un template de chez blogger pour carrément le modifier, je bidouille en fait le langage html, cependant j'aimerais intervertir plusieurs images image 1 image2 image3 image4 en arrière-plan, et je n'y arrive pas malheureusement !!! snif snif...si tu peux m'aider ça serait chouette !!! Merci d'avance !

    RépondreSupprimer
  53. @Clochette
    J'ai pas tous :D une explication plus précise s:)

    RépondreSupprimer
  54. Oui pardon excuse j'ai été un peu rapide !
    Alors j'ai récupéré un template sur blogger (jusque là je pense que c'est bon lol !)
    J'ai créé mon entête que j'ai mis en image de fond non répété en haut, puis une deuxième image en dessous mais elle ne s'affiche pas lorsque je veux qu'elle ne se répète pas, en fait pour qu'elle apparaisse il faut que je la fasse répéter, bon en même temps je comprends pas tout en html donc je pense qu'il me manque un code, En fait en arrière plan je cherche à mettre plusieurs images à la suite les unes des autres, pas une seule image, suis-je plus clair ???

    RépondreSupprimer
  55. @Clochette
    Ok merci, mais je ne pense pas que c'est pas possible d'afficher plusieurs images en arrière plan !!!
    Mais dans ton blog c'est le cas!!!! j'ai vu que tu as créé plusieurs sections que pour mettre des arrière plan. je regard ça en détaille et re

    RépondreSupprimer
  56. Merci pour ton aide Soufiane peut-être as-tu besoin du code html ?

    RépondreSupprimer
  57. Merci Soufiane mais j'ai trouvé comment faire, j'ai créé une seule image avec toutes mes images pour la mettre en fond, plus simple merci beaucoup !!!

    RépondreSupprimer
  58. Soufiane LeBlogger a dit…

    Tu peux t'entrainer avec un blog teste et sauvegarder ton blog, ton Thème, tes Widgets .....

    -----

    Je me suis entrainer, mais malheureusement, une catastrophe
    avec la templates que j'ai c'est impossible. :)(

    http://tousillicite-exclu.blogspot.com/

    RépondreSupprimer
  59. Ce commentaire a été supprimé par un administrateur du blog.

    RépondreSupprimer
  60. MERCI pour cet article d'un grande aide!

    J'ai une question je ne sais pas si il y a deja un article de fait: en fet lorsque je met des photos sur mon blog je choisis toujours la taille maximale et le truc c'est qu'une fois l'article publié, ça me les coupe à droite :( Comment faire? merci

    RépondreSupprimer
  61. Merci Soufiane, entre le fond et le bouton partager sur facebook, j'ai intégré les modifs sur mon blog (http://www.lagocciadolio-blog.com/) et je trouve ca assez réussi! j'ai parouru beaucoup de blog d'aide pour avoir ces infos en langage débutant, que je suis, et : mention spéciale pour le tien, de ce que j'ai vu c'est le meilleur.Mais tu connais l'adage : chaque jour sur le métier remets ton ouvrage.... alors pas de grosse tete et continues... bravo et merci.

    RépondreSupprimer
  62. Salut Soufiane, je galère grave pour changer le fond de l'en-tete de mon blog (http://www.lagocciadolio-blog.com/) j'aimerais le rendre transparent car j'ai déjà une photo en fond principal et là ca fait un peu lourd! esc-ce possible?merci par avance de ta réponse...

    RépondreSupprimer
  63. J'ai ecrit le code pour avoir une image en arriere plan à la suite de Body mais elle n'apparait pas. Est-ce qu c'est parce que j'utilise un modèle existant?

    Comment faire apparaitre cette image?

    Merci.
    http://lacarolane.blogspot.com/

    RépondreSupprimer
  64. @Christine
    Il faut juste copier coller le code et vérifier bien que l'adresse de ton image fonctionne bien ....

    RépondreSupprimer
  65. @F
    Pour rendre une partie transparente, il suffit de supprimer la ligne :

    background: #...;

    Dans ton cas, il faut supprimer la ligne dans ce code:

    #header-wrapper {eft top;
    margin:22px 0 0 0;
    padding:8px 0 0 0;
    background: #ffffcc;
    color:#5a6f1b;
    }
    #header {
    background: #ffffcc;
    padding:0 15px 8px;
    }

    :d

    RépondreSupprimer
  66. @lexandra.Audrey.
    Non pas encore mais je vais le publier bientôt.

    Quand tu ajoute une image avec Blogger, dans le code de l'image il faut remplacer la valeur s360 par s1600.....

    RépondreSupprimer
  67. Est-ce que tu aurais un site à me conseiller où trouver des images pas mal à mettre en fond (comme la tienne) ?

    RépondreSupprimer
  68. J'aimerais mettre deux images en fond d'écran, une à droite, une à gauche, c'est possible ?
    Autre question, comment on fait pour mettre une image en fond de post ? xD Parce que j'ai essayé avec ta technique après "main-wrapper {" masi ça ne marche pas, ça se répète en y alors que je ne lui ai pas demandé. o.O
    Merci d'avance :)

    RépondreSupprimer
  69. bonjour j'ai fais comme tu as dis mais ca ne marche pas help me please b-( j'en ai marre j'y suis depuis deux heures
    j'ai mis ca :
    body {
    background:url(http://fc08.deviantart.net/fs30/f/2008/074/9/0/kawaii_wallpaper_by_cupcake_bakery.png)repeat-y;

    RépondreSupprimer
  70. Ton image, elle est en png, essaie de la changer en jpg ;)
    Sait-on jamais... ^^

    RépondreSupprimer
  71. Bonjour à tous :) J'aurai une tite question : Est ce qu'il est possible de mettre une autre image de fond sur les messages que celle de l'accueil ? Merci d'avance pour votre aide

    Salutation :)

    RépondreSupprimer
  72. @Switch-K : Essaie peut etre comme ca :

    body {
    background:#E5DCCD url(http://14.img.v4.skyrock.net/146/blog-fond/pics/2124107319_small_1.jpg);

    L'image reste fixe. Je ne sais malheureuse pas comment faire pour qu'elle suive le curseur en descendant :/

    RépondreSupprimer
  73. mais pas compris ce que tu veux dire par autre que celle de l'accueil ???elle ne peux pas suivre le curseur (pas impossible)....tu peux utiliser repeat et une grande image

    RépondreSupprimer
  74. Salut Soufiane :)

    Je voulais parler de l'image de fond que j'ai mise sur la page d'accueil de mon blog. Cette image réapparait lorsque l'on ouvre un message que j'ai posté. Je voulais savoir si il était possible d'en mettre une autre, en fond, pour chaque message que je posterai (histoire de ne pas avoir toujours la meme image à chaque fois)C'est possible de le faire ?..

    RépondreSupprimer
  75. Techniquement c'est possible, il suffit d'utiliser une condition b:if et de spécifier un background pour chaque article, exemple ajoute ce code juste avant </head>

    <b:if cond='data:blog.url == "<b>l'adresse d'un article avec le http...</b>"'>
    <style type='text/css'>
    body{background:url(<b>URL DE VOTRE IMAGE.jpg</b>);}
    </style>
    </b:if>

    RépondreSupprimer
  76. Moi j'avais une question aussi (je me répète je sais...)
    Comment on fait pour mettre une image en fond de post ? xD Parce que j'ai essayé avec ta technique après "main-wrapper {" mais ça ne marche pas, ça se répète en y alors que je ne lui ai pas demandé. o.O
    Merci d'avance

    RépondreSupprimer
  77. comment tu veux que je sache, tu laisses toujours des commentaires anonyme ;;) comment je peux que je sache ce qu'il y a dans ton blog ;;)

    RépondreSupprimer
  78. Bah en remontant un peu tu devrais voir mes questions. Je pensais pas que tu aurais besoin de l'adresse pour ces questions là.
    Je t'avais posé des questions sur le post de la barre horizontale aussi, en te laissant l'adresse : http://yo-beta.blogspot.com/ (c'est un blog test).
    Mais c'est vrai que je ne l'avais pas mis ici. Mais maintenant c'est fait :p

    (ps : mon blog principal c'est celui-là : www.yaoi-ouji.fr)

    RépondreSupprimer
  79. Bonjour,

    Je souhaiterais rajouter une image de fond, en bas de page est-il possible de le faire, j'ai essayer avec repeat-x, z

    je n'arrive pas a le faire.
    Merci s'il y a une solution.

    MZE

    RépondreSupprimer
  80. MZE
    Faut créer une section (une DIV) pour ça at ajouter un arrière plan pour cette section ...

    RépondreSupprimer
  81. Salut Soufiane,

    Comment fait-on pour créer une section d'une DIV?
    merci pour ta réponse

    MZE

    RépondreSupprimer
  82. Bonsoir Soufiane,

    Ton tuto est super. Merci.

    J'ai malgré un soucis. Sur certains ordi, mon background rempli bien mon blog. Sur d'autres, une colonne blanche apparait sur la droite... surement du au fait que l'image est mise en haud à gauche.

    Pourrais tu me dire comment "étirer" l'image pour que le blog s'adapte à toutes les configurations...

    Merci beaucoup... :)

    RépondreSupprimer
  83. Bonjour.
    Désolé, j'ai lu comment faire et essayé de le reproduire ce que vous avez dit a la lettre, seulement sa ne marche pas.
    Quand j'ai fais les manipulations, mon fond devient tout blanc ..
    Pouvez-vous m'aider s'il vous plait?
    Merci d'avance.

    RépondreSupprimer
  84. @Mike
    ça répond de la taille de l'image par rapport à la taille de l'écran et celle du blog ... Faut compléter par une couleur proche de celle d'arrière plan ...

    RépondreSupprimer
  85. Je l'ai fait, merci à toi... ;) aurais tu une astuce mettre la bordure de l'image "titre" du blog en transparence ?

    Merci ! :)

    RépondreSupprimer
  86. Au lieu de body recherche un truc qui contient header et remplace la ligne border: ....; par border: none;

    RépondreSupprimer
  87. Bonjour et merci pour ton aide leblogger. j'aimerai changer l'image du header, le problème est qu'il est trop haut et cache la page à l'écran. J'ai pu coller une autre image sur l'original mais je n'arrive pas a faire un changement total,donc moins haut. le modèle est "Tic tac"

    RépondreSupprimer
  88. J'ai une solution pour "Tic tac"

    http://changeheader.blogspot.com/2006/08/change-blogger-header-in-tictac.html

    Qu'en pensez-vous ?

    RépondreSupprimer
  89. @Philippe Demeyere
    Ok, si ça marche tant mieux ....

    RépondreSupprimer
  90. Encore une chouette gadget que je viens d'appliquer
    :p

    RépondreSupprimer
  91. Bonjour Bonjour , j 'ai un soucis , j 'ai bel et bien recopier le code , tout comme vous me l 'avez dis , mais l 'arrière plan ne veut pas se mettre , et je ne comprends vraiment pas pourquoi .
    Mon arrière plan vient d 'un site : http://4.bp.blogspot.com/_KO-Gfxdm_w4/S4OXHVxhNDI/AAAAAAAAAoM/tNM7AV-P4YQ/s1600-h/urbanburp-floral.jpg

    Et j 'ai bel et bien écrit :
    body {
    background:url(http://4.bp.blogspot.com/_KO-Gfxdm_w4/S4OXHVxhNDI/AAAAAAAAAoM/tNM7AV-P4YQ/s1600-h/urbanburp-floral.jpg)repeat-x;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    Je ne comprends pas. Aidez moi !

    RépondreSupprimer
  92. @Taches-Rousse
    L'adresse de l'image de ton arrière plan est "mauvaise", il faut la remplacer: http://s955.photobucket.com/albums/ae34/Taches-Rousses/?action=view&current=urbanburp-floral.jpg

    RépondreSupprimer
  93. Merci , j 'ai modifié l 'adresse mais ça ne fonctionne toujours pas..
    body {
    background: url(http://s955.photobucket.com/albums/ae34/Taches-Rousses/?action=view&current=urbanburp-floral.jpg)repeat-x;

    Je ne comprends encore vraiment pas ..

    RépondreSupprimer
  94. Bonjour. Alors voilà, cela va faire deux semaines que je tente de mettre un arrière plan (image se trouvant sur mon ordinateur)! Mais sans résultats ... J'ai vraiment besoin d'aide. J'ai lu et relu tout les blogs d'aides, envoyée des commentaires... Mais RIEN.

    Alors voilà, peux-tu m'aider s'il te plait?
    J'ai suivie tes expliquations. Comme tu l'as dit, je suis aller sur un hébergeur d'image, fait copier/coller l'URL, ect... Et voici ce que ça donne :
    body {
    background:url(http://www.hostingpics.net/viewer.php?id=362431Arriere_plan__33_.jpg)repeat-x;
    Mais mon arrière plan ne s'affiche pas. Serait-ce à cause de l'URL?
    Merci.

    RépondreSupprimer
  95. Essai d'héberger tes photos dans un service comme Potobucket ou Picasa pour avoir un lien direct vert ton image d'arrière plan ...

    RépondreSupprimer
  96. Tous d'abord pour ma part cela marche très bien(fond fixe) , mais moi je modifie le code sans cocher la case développer des modèles de gadgets !

    Donc pour commencer je vais ici:

    */
    body {
    margin: 0px 0px 0px 0px;
    background:#fff url("");
    background-position: 50% 31px;
    text-align:center;
    font:x-small Verdana, Arial, Sans-serif;
    color:$textcolor;
    font-size/* */:/**/small;
    font-size: /**/small;

    Qui se trouve Juste avant :

    /* Page Structure
    ----------------------------------------------- */

    Aprés il suffit de changer le code :

    */
    body {
    margin: 0px 0px 0px 0px;
    background:#fff url("ADRESSE DE L'IMAGE")no-repeat;
    background-position: 50% 31px;
    background-attachment: fixed; (Ligne a ajouter si vous voulez une image fixe)
    text-align:center;
    font:x-small Verdana, Arial, Sans-serif;
    color:$textcolor;
    font-size/* */:/**/small;
    font-size: /**/small;


    Pour Anais : Oui c'est l'url !Il te faut une url lien direct !

    RépondreSupprimer
  97. Salut Soufiane !
    Je pensai m'aider des commentaires, mais comme tu l'a cité, tout est effacé !
    J'ai essayer une bonne vingtaine de fois de suivre le tuto à la lettre mais rien ne veut marcher...
    Sachant que ma répétion ne marche pas, j'ai inclu mon motif sur une grande image que j'ai mis au même format que la tienne (1920x1040), et l'image ne se retrouve en aucun cas sur toute ma page...
    De plus ce motif etant psychedelique, je n'arrive pas du tout à place du blanc à l'emplacement de mes pages...
    Je t'ai fait une capture d'écran que tu comprenne mieux le truc :
    http://i830.photobucket.com/albums/zz227/alexisjamet/capture.jpg
    En attendant ton aide !
    Merci
    Alexis

    RépondreSupprimer
  98. J 'ai encore essayer ce que vous m 'avez dit , et toujours aucun changement .. Je commence vraiment à en avoir marre .. Je donne mon adresse msn si quelqu'un veut bien m 'aider parce que j 'avoue que je commence à devenir dingue .. Redhair.Rulz@hotmail.fr .. Merci :/

    RépondreSupprimer
  99. J'arrive pas T_T
    Une URL c'est pareil à un lien direct ?

    RépondreSupprimer
  100. @♥
    Oui c'est exactement la même chose

    RépondreSupprimer
  101. Bonjour,



    j'espère recevoir une petite aide, sur mon blog la colonne " rouge " de droite est trop éloignée du bord , j'aimerais qu'elle soit à la même distance que celle en vert par rapport au bord.

    blog : http://tolgiz.blogspot.com/

    RépondreSupprimer
  102. @Tolgiz
    Je ne vois pas de colonne rouge ?
    Avoir deux colonne de la même taille, n'est pas chose facile. Le plus simple est d'inclure les deux colonnes dans une plus grande et d'utiliser une image en arrière plan da la grande colonne...


    (j'ai bien aimé ton blog, Très bon Design :)))

    RépondreSupprimer
  103. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  104. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  105. second essai, je vais y arriver :

    Oui je me suis mal exprimé je voulais parler de la petite image rouge à droite avec les feutres et le spray comprenant le menu dessous.

    Je vois, je pense que je vais laisser ainsi , ça me semble beaucoup de chipotage et je n'aimerais pas me planter


    Merci du compliment , je suis infographiste , coté design ça va mais l'HTML un peu moins


    au passage je te remercie de ta patience et de tes tutos qui m'auront beaucoup aider aujourd'hui je m'attendais pas à ce résultat honnêtement :)

    RépondreSupprimer
  106. Pour résoudre ton problème: tu vas dans le code HTML de ton blog et tu recherches ça
    #main-wrapper {
    float:left;
    margin:0 10px 0 0;
    overflow:hidden;
    width: 410px;


    Si tu remplaces width: 410px; par width:435px; cela va augmenter la taille de la colonne des articles et par conséquence décaler la colonne de droite vers la droite !



    (Moi je suis plus codeur/programmeur, donc coté HTML/CSS/JS ça va, mais niveau Photoshop je manque d'idée ...

    Peut être qu'on devrait s'entre-aider !!!)

    RépondreSupprimer
  107. Ouep, ça change un petit peu , mais ça va je m'y fait

    par contre je n'arrive pas à donner une petite touche finale , le fond !

    Je pensais mettre cette image( http://s880.photobucket.com/albums/ac5/tolgiz/?action=view&current=fondmauve.jpg ) en fond , et qu'elle ce répète en X , de façon à me faire un petit fond en dégradé mais quand je l'applique TOUT LE FOND devient blanc ! je pense pas avoir fait d'erreur dans le remplacement de ma ligne :/ c'est peut-être le 1er Background installer qui fait tout merder ? aucune idée...

    body {
    background:url(http://s880.photobucket.com/albums/ac5/tolgiz/?action=view&current=fondmauve.jpg) repeat-x;
    margin:0;
    color:$textcolor;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }

    RépondreSupprimer
  108. C'est l'adresse de l'image qui n'est bonne !

    RépondreSupprimer
  109. AAh lol j'avais pas vu le " Direct link " à gauche ! xD je prenais depuis la barre HTML direct :/ je vais tester ça maintenant

    RépondreSupprimer
  110. Ouep ça fonctionne ! bon j'avoue j'ai forcer sur le dégradé mais bon , c'est juste un test, je penserai à le travailler dans la soirée.

    J'ai d'autres idée qui doivent aller avec ce fond, si tu veux savoir :

    1) image de fond en dégradé en repeat-x >> c'est terminé.

    2) un " cadre " (.PNG ) par dessus le fond en dégradé comme ici par exemple :
    http://buzz-fr.blogspot.com/2010/01/les-pages-arrivent-sur-blogger-in-draft.html
    la colonne du centre ressort bien du fond.

    3) une grande image fixe (.PNG ) pour décorer le dessus du blog , par exemple mon logo à gauche et à droite de mon blog intégré dans le fond

    Je crois que c'est possible :) enfin je pense que c'est réalisable !

    Je pensais dupliquer le background selon ce que je voulais , ça donnerait par exemple :

    body {
    background:url(http://i880.photobucket.com/albums/ac5/tolgiz/fondmauve2.jpg) repeat-x;

    background: code pour image de fond fixe ( cadre )
    background: code pour image de fond fixe ( décoration sur les cotés )

    Je suis dans le bon ou complètement à coté ? :D

    RépondreSupprimer
  111. background:url(http://79.art.skyrock.net/pictures/57931279.84.jpg.jpg)

    Et pourtant ça marche pas --'

    RépondreSupprimer
  112. Lily , c'est normale , tu as copier 2 fois l'extension ".jpg" de ton image !

    retire un " .jpg " :) dans ta ligne de code et retente.

    RépondreSupprimer
  113. Ouep c'est bien ça le problème

    voila ta bonne ligne:

    http://79.art.skyrock.net/pictures/57931279.84.jpg

    RépondreSupprimer
  114. Il faut que tu héberges l'image

    RépondreSupprimer
  115. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  116. =(( ! Argh ! je peux pas superposer les images background(.PNG) ?!

    J'ai une image qui ce répète en -x (center) de façon à créé la bordure qui encadre mon blog , je voulais placer une image en fond (bottom) qui ce répète en - Y Derrière mon encadrement mais il veut pas !

    c'est l'un ou l'autre visiblement xD mais pas les deux...

    Bref j'avais tenter ça :

    background: #800040 url("http://i880.photobucket.com/albums/ac5/tolgiz/sides_body3.png") repeat-y center top;

    background:url ("http://i880.photobucket.com/albums/ac5/tolgiz/Bottom.png") repeat-x bottom left;


    mais bon , visiblement je suis à coté de la plaque :-*

    RépondreSupprimer
  117. Bon je vais formuler une question simple :D même si je sais pas si ma demande sera possible...

    As-tu un script HTML qui pourrait m'aider à superposer plusieurs background?

    comme ça je pourrais faire repeter mon image de fond en " x ", et une autre de fond en " y " en utilisant des images.PNG

    RépondreSupprimer
  118. Il n'y a pas de script, faut utiliser des sections DIV ...

    RépondreSupprimer
  119. euh?... ça ne me dit rien :Z

    niveau code c'est pas mon domaine x) je vais chercher après ça

    RépondreSupprimer
  120. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  121. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  122. Finalement je vais faire quelque chose de plus simple :)

    par contre , si tu as un code HTML pour faire un fond avec plusieurs DIV pense à moi ^^ en attendant je vais faire simple

    RépondreSupprimer
  123. Voila le design est fini :) > http://tolgiz.blogspot.com/

    ça me convient tout à fait , la 1ere version était un peu trop féminine.

    RépondreSupprimer
  124. @Tolgiz
    Ok c'est cool, maintenant il faut voir le contenu !

    RépondreSupprimer
  125. Bonjour Soufiane , peut-tu m'aider à finaliser le blog ?

    j'aimerais pouvoir utiliser 2 backgrounds , tu m'avais parler d'utiliser une DIV , mais je ne trouve rien qui pourrait m'aider à ce sujet...

    j'ai déjà une image de fond qui ce répète en -X , j'aimerais pouvoir utiliser une DIV pour mettre une image qui ce répète en Fond derrière la 1ere.

    as-tu un code ?


    Voici mon blog http://www.tolgiz.blogspot.com/

    RépondreSupprimer
  126. bnjour, merci pour le tuto j'aimerai savoir coment meitre une imaje et quell aparaiss juste des deux coté donc gardé le cadre blanc des message au milieu?

    RépondreSupprimer
  127. pour moi non plus ca fonctionne pas, j'ai pourtant suivi les instructions :

    /* Content
    ----------------------------------------------- */
    body {
    font: $(body.font);
    color: $(body.text.color);
    background:url(http://picasaweb.google.fr/lh/photo/brCe1_KpccJEMc_PejxC_Q?feat=directlink.jpg);
    }

    Que faire? Mon fond reste blanc
    Merci

    RépondreSupprimer
  128. Bonjour

    Vous voulez renouveler le fond de votre blog ?
    J'ai une adresse qui peut vous interessé : http://artsdco.blogspot.com/
    Vous trouverez sur ce blog une multitude de modèle qui vous conviendra.

    A Bientôt

    RépondreSupprimer
  129. Bonjour,

    Ca fait plusieurs jours que je me penche sur le sujet, il n'y a rien a faire, je ne trouve pas le code dont tu parles.... :(
    Est ce que le code html a changé depuis que tu as écris ton article ? Je suis désespérée là......
    Merci d'avance pour ton aide

    http://lebuissondelivres.blogspot.com

    RépondreSupprimer
  130. Avec les nouveaux modèles, cette méthode ne fonctionne pas. Du coup, perso, je suis pas plus avancé et je cherche toujours (depuis 1 semaine).

    RépondreSupprimer
  131. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  132. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  133. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  134. @Octopus

    Voici la méthode pour les nouveau modèles ;)
    Il faut toujours aller dans "Modifier le code HTML"
    Puis cherche dans la première partie du code , cherche ce code :


    Variable name="body.background" description="Body Background" type="background"
    color="$(body.background.color)"
    default="$(color) none repeat scroll top left" value="#000000 url(http://i37.tinypic.com/1zqtxqe.jpg) no-repeat fixed top center /* Credit: enot-poloskun (http://www.istockphoto.com/googleimages.php?id=2904973&platform=blogger) */"/

    PS : J ai retirer les code balise car sinon le message ne parveait pas a inscrire le code ;)

    Tu peut remarquer que dans mon cas j'ai déja modifié l'image, ce code se trouve dans la première partie du code alors si tu cherche et que tu arrive a :

    /* Content
    ----------------------------------------------- */
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }


    Tu peut retroussé chemin et mieux chercher avant ;) Revenons en au premier code, dans celui ci, tu n as qu a changé http://i37.tinypic.com/1zqtxqe.jpg par l'url de l'image de ton choix ;) et voila le tour est joué !!!


    http://planete-doudouland.blogspot.com/

    RépondreSupprimer
  135. Il y a widget recherche en haut du blog, vous devez l'essayer avant de poser des questions dans les commentaires et attendre les réponses

    En cherchant par exemple le mot "Arrière plan" vous trouverez cet article : Utilisez vos propres images en arrière plan d'un blog Blogger

    RépondreSupprimer
  136. Bonjour!

    Comment faire pour changer l'opacité de l'image d'arrière plan ?
    J'ai utilisé ce code là pour mon image:
    background:url(URL DE VOTRE IMAGE.jpg);

    et du coup j'ai essayé avec opacity:0.5; mais cela n'a pas fonctionné pour l'image d'arrière plan mais pour mes blocs de page... Je ne comprends pas.

    Merci d'avance!

    RépondreSupprimer
  137. bonjour!

    lorsque je met l'image, il ne parait pas avec la bonne couleur comme s'il y avait un filtre, le noir est gris...

    RépondreSupprimer
  138. Bonjour,

    j'ai suivi avec attention votre tuto mais cela ne fonctionne pas chez moi

    j'ai utilisé photobucket avec le directlink de l'image..

    voici mon code:

    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
    $(body.background.override)
    cursor: auto}
    a{

    et mon lien de blog;

    www.trsitan.blogspot.com

    Merci d'avance

    RépondreSupprimer
  139. pardon, j'ai finalement trouvé tout seul..

    RépondreSupprimer
  140. Un grand merci ! Court Clair et efficace

    RépondreSupprimer
  141. salut ! moi aussi je veux changer l image du fond de mon blog et quand je clique sur : modifier le code html, j ai trois boutons : Traiter, ouvrir l'outil de création de model, et : annuler, mais je trouve pas : la case "Développer des modèles de gadgets".

    Alors svp vous voudrais bien mde dire, où est cette case svp, merci d'avance.

    RépondreSupprimer
    Réponses
    1. tu mets traiter et ensuite tu verras la case 'Développer ...'
      ils préfèrent prévenir pour les utilisateurs non avertis qui se seraient trompés, d'où la pré-question...

      Supprimer
  142. Bjr tt le monde.de grâce aidez moi.j'aimerai savoir kel est la taille idéale pour un arrière plan?
    puiske je ny parviens vraiment pas.à chak insertion,on m'affiche une toute ptite image alors qu'elle n'est pas ptite à l'origine.

    RépondreSupprimer
  143. salut
    comment changer d'image de fond à chaque recharge ?
    Merci

    RépondreSupprimer
  144. Bonjour,
    Tout d'abord merci pour ce tuto très bien expliqué et qui permet de s'en sortir au maximum tout seul...pourtant j'ai un pb, mon image semble trop grande et je sais qu'il existe un code pour ajuster automatiquement les images aux écrans des visiteurs (je l'avais utilisé il y a longtemps sur un forum...). Pourriez vous me filer un petit coup de main sur ce coup là ?
    Avec tous mes remerciements

    RépondreSupprimer
  145. Merci pour ce tuto
    mais si on veut appliquer un fond dans un article pas la totalité du blog,comment fait-on?

    Merci bcp

    RépondreSupprimer
  146. Salut à tout. Si je suis ici c'est que j'ai mon propre blog (évidament) mais moi j'aimerait mettre un fond de ce janre : http://4.bp.blogspot.com/-04f6WV7pV5o/USWAasWKMYI/AAAAAAAAARU/dgnA0ebY2Hc/s1600/the-tech-game-free-minecraft-youtube-background-95.jpg (C'est l'url de l'image) quel qu'un pourait me dire comment ? car quand je le met le motif se repette.

    RépondreSupprimer
  147. Bonjour Mister Soufiane, bon apparemment tu ne réponds plus ...

    C'est très bien expliqué mais je ne trouve pas body etc dans modifier votre code HTML ...

    RépondreSupprimer

Copyright 2015 Soufiane.fr