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

Coucou j'attendais ce tuto depuis longtemps, tu devrais aussi nous donner des belles images pour les mettre directement
merci c'est super.

@ Marty
Alors ça donne quoi?

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

background-attachment: fixed;

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 !!!!

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

@ 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 ;

super ! c génial, ca marche , merci beaucoup Soufiane !;-)

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é ?

@ 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.

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.

@ 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;

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 ^_^

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

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 ?

@ 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.

oui .... mais comment ? lol

@ 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.

Pas de solution pour mon problème d'opacité ? :(

@ Vouvou
je vois pas ce que je peux faire de plus, dsl :((

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

@ mikku
dans ton code HTML il y a

body {
background:black;

Il suffit de modifier la ligne background ???

Pas grave, merci tout de même Soufiane ;)

mais jai suivi exactemenant ce quil fallait mais limage napparait pas :(

esquil fait mettre le lien de limage apres le mot background ou on remplace a partir du mot background jusqua color ??

ah cest bon sa marhce, en faite je nutiliser pas le bon hebergeur dimages

@ mikku
tu peux utiliser photobucket c'est très bien.

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/

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?

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 =(

@ 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.

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.

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

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

@Sebastom13
Changer l'image à 3 colonnes ??? j'ai pas compris !!!!

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;

@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 ???

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 :)

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

@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.

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

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

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

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/

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.

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 :))

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

:p

Merci !!

merci de me renseigner ou je peux trouver l'url de l'image que je veux mettre en arriere plan

@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...

@Jenny
Yourwilkam :))

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 =)

@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" =))

Super, ca marche parfaitement, merci beaucoup !

Helene
;;)

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 !

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

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 ???

@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

Merci pour ton aide Soufiane peut-être as-tu besoin du code html ?

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 !!!

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/

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

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.

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...

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/

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

@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

@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.....

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

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 :)

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;

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

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 :)

@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 :/

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

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 ?..

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>

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

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 ;;)

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)

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

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

Salut Soufiane,

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

MZE

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... :)

ohhh mercii :)

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.

@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 ...

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

Merci ! :)

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

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"

J'ai une solution pour "Tic tac"

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

Qu'en pensez-vous ?

@Philippe Demeyere
Ok, si ça marche tant mieux ....

Encore une chouette gadget que je viens d'appliquer
:p

:)

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 !

@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

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 ..

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.

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 ...

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 !

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

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 :/

J'arrive pas T_T
Une URL c'est pareil à un lien direct ?

@♥
Oui c'est exactement la même chose

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/

@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 :)))

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 :)

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 !!!)

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;
}

C'est l'adresse de l'image qui n'est bonne !

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

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

ça marche pas --'

background:url(http://79.art.skyrock.net/pictures/57931279.84.jpg.jpg)

Et pourtant ça marche pas --'

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.

Ouep c'est bien ça le problème

voila ta bonne ligne:

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

Il faut que tu héberges l'image

=(( ! 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 :-*

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

Il n'y a pas de script, faut utiliser des sections DIV ...

euh?... ça ne me dit rien :Z

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

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

Voila le design est fini :) > http://tolgiz.blogspot.com/

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

@Tolgiz
Ok c'est cool, maintenant il faut voir le contenu !

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/

Moi je n'ai pas réussi ...

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?

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

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

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

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).

@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/

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

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!

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...

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

pardon, j'ai finalement trouvé tout seul..