[v2.0] Mettre un fond d'écran

Dimanche 3 juillet 2005 7 03 /07 /Juil /2005 00:00

- Publié dans : Fond du blog

[v2.0] Mettre un fond d'écran

Pour mettre un fond d'écran sur son blog, il faut éditer le CSS.

Mettre un fond d'écran

1. Importez votre image dans vos fichiers (méthode)

2. Allez dans l'onglet Mes fichiers, puis cliquez sur Images.

3. Cliquez sur la loupe pour afficher l'image en grand.

3bis. Faites un clic droit (contrôle-clic sous Mac) sur votre image, allez dans Propriétés, et notez l'adresse URL de votre photo.
Exemple : http://www.over-blog.com/4/3/1234/pics/monimage.jpg

4. Allez dans l'onglet Design, puis sur Modifier le CSS.

5. Dans la première ligne de votre CSS, (qui commence par body), repérez l'attribut background.

6. Remplacez tout le texte commençant par background et finissant au premier point-virgule par background-image : url(collez_l'URL_de_votre_image_ici) ;

7. Vous obtiendrez donc par exemple :

body { margin: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: x-small; color: #00000;
background-image: url(http://www.over-blog.com/4/3/1234/pics/maphoto.jpg); }

8. Enregistrez votre fichier CSS en cliquant sur Enregistrer.

Plus
- Email
- Lien
- Imprimer

Voir les 303 commentaires

Précédent : [v2.0] Autres questions sur les fonds Retour à l'accueil Suivant : [v2.0] Redimensionner une image

Commentaires

pas sur la ligne input, mais la ligne body...

Commentaire n°51 posté par Fabrice le 21/09/2005 à 12h17

SVP J'ai essayé plein de chose et ça ne fonctionne pas plus.

body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color: #00000; background-image: url(http://idata.over-blog.com/0/11/58/6/noir.png); }
h1 { color: #5675A4; font-size: 17px;margin-top:5px } /*titre des pages*/
h2 { color: #5675A4; font-size: 13px; }
h3 { color: #5675A4; font-size: 12px; }

Help!!!!!!! Merci d'avance!!!

Commentaire n°52 posté par jippy vinet le 24/09/2005 à 02h26

jippy> l'image http://idata.over-blog.com/0/11/58/6/noir.png n'est pas à cette adresse ;)

Commentaire n°53 posté par Fabrice le 24/09/2005 à 08h20

ha ok c'est pour cela

Commentaire n°54 posté par jippy vinet le 24/09/2005 à 13h57

mince alors sa marche toujours pas. si il ne marche pas une fois de plus bien je crois que je vais aller me pendre.

Commentaire n°55 posté par jippy vinet le 25/09/2005 à 19h38

je ne comprends pas pourquoi elle n'est pas à cette adresse. quest-ce que sa explique parce que la je suis tout perdu.

Commentaire n°56 posté par jippy vinet le 30/09/2005 à 03h51

Reprends l'adresse sur la photo...

Commentaire n°57 posté par fabrice le 30/09/2005 à 09h49

Ah oui, je me suis trompée de ligne !!!

Commentaire n°58 posté par Nicodemia le 04/10/2005 à 14h44

Arf! je m'es trompée de ligne, j'ai changé celle-là :
"input { border:solid 1px #D8D7D7; font-size:100%;
background:url(http://fdata.over-blog.com/0/13/53/58/thumbs/association.jpg)
/* ---------- Structure ------- */
/* La class main correspond à la ..."
maintenant le fond est tout blanc et j'arrive même pas à revenir à la config par défaut :(
Qqu'un veut bien m'aider?

Commentaire n°59 posté par Association Jessica le 07/10/2005 à 22h50

si vous pouviez juste m'indiquer comment retrouver le css d'origine (modèle 2) SVP! Merci pour votre aide!
Une toute petite bloggeuse honteuse qui le fera plus, promis!

Commentaire n°60 posté par Association Jessica le 07/10/2005 à 22h56

Ca y est c'est revenu! Du coup j'hésite à mettre mon image, elle était en mosaïque au lieu de plein écran!?...
Je vais garder le design d'origine tant je je ne serai pas plus douée!
Merci pour les tutos!

Commentaire n°61 posté par Association Jessica le 07/10/2005 à 23h13

pour info sa marche nikel mais pas en image pleinne
alors un fois votre url mise et le tout enregistrer redecocher la petite case en haut ( je souhaite modifier moi même le fichier css ) et refaite ctrl+F5 sur votre page de blog ;) moi sa marche que comme sa mais l image est pas en full screen :(

Commentaire n°62 posté par StyX le 13/10/2005 à 05h21

l'image reste à la taille de l'image. Si tu as une image trop "petite", il faut peut etre l'heberger ailleurs ;)

Commentaire n°63 posté par fabrice le 13/10/2005 à 10h35

svp un peu d'aide j'ai un peu tout essayé...je suis nul :)
mon css :

body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; background-image: url(http://idata.over-blog.com/0/14/38/95/fond/bordu-001.jpg); }
h1 { color: #000000; font-size: 20px; } /*titre des pages*/
h2 { color: #000000; font-size: 15px; }
h3 { color: #000000; font-size: 12px; }

Commentaire n°64 posté par rodanski le 15/10/2005 à 12h56

correction!

le fond d'écran fonctionne mais uniquement sur la page album...

Commentaire n°65 posté par rodanski le 15/10/2005 à 13h08

Bonjour,

Est-il possible de mettre un fond (type image en filigrane ) dans un seul article ?

Merci par avance pour votre aide.

Bonne journée.

Commentaire n°66 posté par Wushuman29 le 26/10/2005 à 11h04

Bonjour !
j'essaie désespérément de mettre une image de fond dans le cadre d'ajout de commentaires, mais je n'y arrive pas
je ne comprend pas où il faut remplacer body par .box
j'ai bien trouvé .box dans mon CSS, mais je ne trouve pas où mettre l'image de background :-(

si quelqu'un veut bien m'aider ;-)

merci par avance ;-)

Thomas

Commentaire n°67 posté par Thomas le 28/10/2005 à 09h48

Bonsoir,

Je souhaite mettre un fond d'écran depuis le début de la soirée et je n'y arrive pas Au secours, j'ai suivi la FAq et autre mais rien à faire

Commentaire n°68 posté par raky le 31/10/2005 à 23h45

sa ne marche pas, l'image apparait dans la newletters

dites moi ce qui va pas
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; }
h1 { color: #5B6B7C; font-size: 20px; } /*titre des pages*/
h2 { color: #5B6B7C; font-size: 15px; }
h3 { color: #5B6B7C; font-size: 12px; }
a { text-decoration:underline; color:#5B6B7C; font-size:110%; } /* lien */
a:hover { text-decoration:none; color:#5B6B7C}
legend { color:#5675A4; padding-left:5px; padding-right:5px;}
li { list-style-type:none; }
img { border:0px; } /* image */
input { border:solid 1px #D8D7D7; font-size:100%;
background-image: url(http://idata.over-blog.com/0/15/98/12/fond-drogba-03-1280.jpg); }

Commentaire n°69 posté par nico le 06/11/2005 à 12h40

on a pas dit sur la ligne input mais sur lal igne body....

Commentaire n°70 posté par fabrice le 06/11/2005 à 13h31

bonjour, j'ai réussi à mettre un wallpaper en font mais j'aimeria savoir comment éviter qu'il ne se repète et n'apparaîsse qu'une seule fois ?
(un précédent commentaire parle de no-repeat, mais on le rajoute à la suite? et commen?) merci d'avance

Commentaire n°71 posté par Shu` le 08/11/2005 à 18h42

Bonjour,

G bo tout lire les com j'arrive pas à comprendre :

pouvez vous me dire comment faire apparaitre mon fond sur tout l'ecran (ça veut dire koi l'héberger ailleur, où dois-je le mettre et que sera son url ds ce cas?)

dc à voir le pbm sur mon blog

merciiiii

Commentaire n°72 posté par Bout d'Artiste le 11/11/2005 à 01h26

ya personne qui peut m'aider!!!!! ça fait 3 jr quer je m'acharne dessus j'y arrive pas, g enregistré mon fond ailleurs ms c pire elle est encor plus peyite!!!!

au secouuuuuurrr

quelqu'un a un site à me conseiller pour enregister mon fond ailleurs que sur ob (sauf cekui avec la grenouille)

merci

Commentaire n°73 posté par Bout d\\\'Artiste le 13/11/2005 à 14h23

g trouvé toute seule et ouiii c toujours pareil...on fini toujours par trouver...je l'ai hébergée sur hiboox.com si y'en a qui attendent la réponse au cas où

Commentaire n°74 posté par bout d'artiste le 14/11/2005 à 10h51

Le CSS a changé ! Comment on fait pour cette nouvelle version ?

Commentaire n°75 posté par Nicodemia le 18/11/2005 à 09h20

bonjour

moi j'aimerais mettre une image en fond d'ecran dans un article ....

j'essaye d'insérer le code dans le source de l'article mais n'y arrive pas, auriez vous une idée ??

d'avance un grand merci !

Commentaire n°76 posté par PH le 21/11/2005 à 11h06

Pour un seul article, c'est compliqué. Il faut en fait créer dans l'article, en mode source, un div avec le fond...

Réponse de Fabrice B. le 21/11/2005 à 11h12

Bonjour

Je suis totalement perdue, pourtant j'ai bien suivie les instruction, j'ai charger mon image pour le mettre en fond d'écran le problème c'est que quand je vais sur l'onglet Design il ya que les modèles proposé et comme sous menu "changer de modèle" et "Rétablir la configuration par défaut", il n'y a pas la case pour cocher " Je souhaite modifier moi même le fichier CSS", aidez moi s'il vous plait, je ne sais vraiment pas comment faire, merci beaucoup!

Commentaire n°77 posté par Arimi le 27/11/2005 à 01h48

Pour modifier le CSS, il faut passer en mode avancé (cf liens Fonctions du menu)

Réponse de Fabrice B. le 27/11/2005 à 18h34

j'y arrie pas mon fon ne safiche pas voila mon css qu'es ce qui ne vas pas ?
/* ---------- Elements Principaux ------------- */
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}
background-image : url(http://idata.over-blog.com/0/18/57/26/offs.jpg); }
h1 { color: #5675A4; font-size: 20px; } /*titre des pages*/
h2 { color: #5675A4; font-size: 15px; }
h3 { color: #5675A4; font-size: 12px; }
a { text-decoration:underline; color:#5675A4; font-size:110%; } /* lien */
a:hover { text-decoration:none; color:#9E9E9E}
legend { color:#5675A4; padding-left:5px; padding-right:5px;}
li { list-style-type:none; }
img { border:0px; } /* image */
input { border:solid 1px #D8D7D7; font-size:100%;
merci

Commentaire n°78 posté par antho le 09/12/2005 à 08h35

font-size:x-small;}

Tu as un } en trop juste la.

Réponse de Fabrice B. le 09/12/2005 à 10h03

moi aussi ca marche pas pourtant j ai tous lu
a l aideeee

/* ---------- Elements Principaux ------------- */
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; background-image:url(http://www.over-blog.com/0/19/33/06/cotpl3.jpg); background-repeat: repeat }
h1 { color: #5675A4; font-size: 20px; } /*titre des pages*/
h2 { color: #5675A4; font-size: 15px; }
h3 { color: #5675A4; font-size: 12px; }
a { text-decoration:underline; color:#5675A4; font-size:110%; } /* lien */
a:hover { text-decoration:none; color:#9E9E9E}
legend { color:#5675A4; padding-left:5px; padding-right:5px;}
li { list-style-type:none; }
img { border:0px; } /* image */
input { border:solid 1px #D8D7D7; font-size:100%; background:#FFFFFF; color:#5675A4; } /* bouton */

Commentaire n°79 posté par benjamin le 18/12/2005 à 13h38

Quand je vais sur ton blog, c'est pas ce qui est dans ton css. Il faut sauver le css en validant...

Réponse de Fabrice B. le 18/12/2005 à 13h54

me suis trompé dans l addresse
celle la est bonne desole

Commentaire n°80 posté par benjamin le 18/12/2005 à 13h41

je me suiq apercu des erreur mais ca marche pas...voila ma correction
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; background-image:url(http://idata.over-blog.com/0/19/33/06/cotpl3.jpg); }

Commentaire n°81 posté par benjamin le 18/12/2005 à 13h55

oui mais j enregistre
a moins que ca ne marche pas ou qu il faut proceder autrement

Commentaire n°82 posté par benjamin le 18/12/2005 à 14h24

si tu valides, tu suis la bonne procédure...
Mais sur ton blog, tu as toujours le css par défaut.

Réponse de Fabrice B. le 18/12/2005 à 14h50

oki j ai reussi mais l image de remplie pas tout l ecran.
que faire?
de plus je n arrive pas a enresgistrer des images, dans mes photos, en format pleine ecran, elles sont toujours plus petites.
y a t il une option que je n aurais pas decouvert

Commentaire n°83 posté par benjamin le 18/12/2005 à 15h22

les photos sont limitées à 600 pixels pour les blogs en mode confiance ;)

Réponse de Fabrice B. le 18/12/2005 à 16h44

J'ai bien suivi les instructions, mais ça ne marche pas... (les modifications sont difficiles à apporter à ce nouveau CSS). Est ce que vous pourriez donner la marche à suivvre pour ce nouveau CSS ?
Avant, il n'y avait pas les lignes :
/*fichier de structure général externe*/
@import url("/css/commonstruct2.css");/*ne pas enlever cette ligne qui permet l'evolution des css personnalisés*/
donc, j'en conclus que le CSS a changé. De plus, vous montrez pour exemple :
body { margin: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: x-small; color: #00000;
background-image: url(http://www.over-blog.com/4/3/1234/pics/maphoto.jpg); }
, alors que dans mon CSS j'obtiens quelque chose comme :
body {margin:0px;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:x-small; color:#00000;
background-image:url(http://www.over-blog.com/4/3/1234/pics/maphoto.jpg);}
Le plus embetant, c'est que maintenant, il n'y a plus les espaces après le (:), donc quelles sont les nouvelles instructions. Aidez-moi, SVP, je galère depuis un bon moment (en plus, je crois avoir déjà posté un commentaire, le n°76, à ce sujet...)

Commentaire n°84 posté par Nicodemia le 20/12/2005 à 21h27

c'est toujours sur la ligne body qu'on rajoute le code background: url(....);

Réponse de Fabrice B. le 20/12/2005 à 21h46

je ne vois pas non plus me problème :(

body    { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; background-image: url(http://proghouse.free.fr/back_ground_technicsmk2.jpg); }
h1      { color: #5675A4; font-size: 20px; } /*titre des pages*/
h2      { color: #5675A4; font-size: 15px; }
h3      { color: #5675A4; font-size: 12px; }
a      { text-decoration:underline; color:#5675A4; font-size:110%; } /* lien */
a:hover { text-decoration:none; color:#9E9E9E}
legend { color:#5675A4; padding-left:5px; padding-right:5px;}
li      { list-style-type:none; }
img     { border:0px; } /* image */
input   { border:solid 1px #D8D7D7; font-size:100%; /* bouton */

Commentaire n°85 posté par trac le 22/12/2005 à 18h58

Vide ton cache.

Réponse de Fabrice B. le 22/12/2005 à 22h47

j'oubliais mon site web : http://proghouse.over-blog.com/

Commentaire n°86 posté par trac le 22/12/2005 à 19h03

Moi non plus ça ne marche pas, rien ne se passe même en vidant le cache...

Voici mon css, si vous pouvez m'aider, merci!!!!

/* ---------- Elements Principaux ------------- */
body    { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;color:#00000;background-image : url(http://idata.over-blog.com/0/13/10/22/200506/mail-p2040050.jpg; }
h1      { color: #5675A4; font-size: 20px; } /*titre des pages*/
h2      { color: #5675A4; font-size: 15px; }
h3      { color: #5675A4; font-size: 12px; }
a      { text-decoration:underline; color:#5675A4; font-size:110%; } /* lien */
a:hover { text-decoration:none; color:#9E9E9E}
legend { color:#5675A4; padding-left:5px; padding-right:5px;}
li      { list-style-type:none; }
img     { border:0px; } /* image */
input   { border:solid 1px #D8D7D7; font-size:100%; background:#FFFFFF; color:#5675A4; } /* bouton */

Commentaire n°87 posté par Wesh Wesh le 29/12/2005 à 03h15

il manque une ) à la fin de l'url ;)

Réponse de Fabrice B. le 29/12/2005 à 18h48

CA MARCHE PAS !

Y'A RIEN QUI CHANGE!...

Commentaire n°88 posté par Al Maker le 29/12/2005 à 21h24

Quand je fais Crtl+F5, ça remet l'ancien CSS !

J'suis dans un cas désespéré !

Commentaire n°89 posté par Al Maker le 29/12/2005 à 21h35

Il faut faire Ctrl+F5 en regardant ton blog.

Et il faut valider le css en bas de la page après l'avoir modifié.

Réponse de Fabrice B. le 29/12/2005 à 21h54

SUPER!!!

Commentaire n°90 posté par Al Maker le 30/12/2005 à 13h51

Hello salut ttl monde, merci pour tes explications pour le fond d'écran, j'ai réussi du 1er coup, j'aurais bien aimé savoir qulle couleur tu as mis sur ce site il est magnifique, mais je n'arrive pas à déterminer cette couleur. merci et bonne journée.

Commentaire n°91 posté par nounours le 04/04/2006 à 11h05

En fond d'écran? pas une couleur, mais une image ;)

Réponse de Fabrice B. le 04/04/2006 à 11h16

j'aimerais savoir comment on inser un lien sur un overblog tel que multimédia

Commentaire n°92 posté par jeremy le 07/04/2006 à 17h44

slt

j'ai reussi a mettre le fond d'ecran mais sa le fait sur mais article mais je veus que sa le fasse que sur mon fond commant faire ?

Commentaire n°93 posté par geoffrey le 09/04/2006 à 21h55

HELP!!! sa fait 3 heure que jessaye mais ji arrive pas!! snif... pouvez vous me dire mon erreur, sa serait trop simpas!!!

/*fichier de structure général externe*/
@import url("/css/commonstruct1.css");/*ne pas enlever cette ligne qui permet l'evolution des css personnalisés*/
/***************************************/

/* ---------- Elements Principaux ------------- */
body    { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;color:#00000; background-image : url(http://idata.over-blog.com/0/23/75/26/photo-du-club/ying-yang.jpg); }
h1      { color: #5675A4; font-size: 20px; } /*titre des pages*/
h2      { color: #5675A4; font-size: 15px; }
h3      { color: #5675A4; font-size: 12px; }
a      { text-decoration:underline; color:#5675A4; font-size:110%; } /* lien */
a:hover { text-decoration:none; color:#9E9E9E}
legend { color:#5675A4; padding-left:5px; padding-right:5px;}
li      { list-style-type:none; }
img     { border:0px; } /* image */
input   { border:solid 1px #D8D7D7; font-size:100%; background:#FFFFFF; color:#5675A4; } /* bouton */

HELP SVP!!!

Commentaire n°94 posté par florian le 10/04/2006 à 15h36

ta page est tellement longue à charger que ca met trop de temps pour moi...

Réponse de Fabrice B. le 10/04/2006 à 18h28

hola a vous!!
je tenais a vous remercier pour votre soutien..grace a vous,je suis arrivé a mettre un fond....
cela peut paraitre facile,simple...mais tout est compliqué quand il n y a personne....
merci encore...
pleins de bonnes choses a vous!!!
xavier

Commentaire n°95 posté par xdk le 12/04/2006 à 02h28

Slt a tous, pas moyen de modifier mon arrière-plan. Voila le css

Commentaire n°96 posté par mathx26 le 13/04/2006 à 21h03

le code là est juste, mais dans ton css, y'a du html mélangé à ton css.

Réponse de Fabrice B. le 13/04/2006 à 21h56

moi non plus je n'arrive pas du tout a changer mon fond d'ecran/

body body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#66CCFF; background-image:url(http://fdata.over-blog.com/0/22/55/23/thur);}

Commentaire n°97 posté par sandisouri le 15/04/2006 à 18h59

l'adresse est fausse. (ou incomplète.)

Réponse de Fabrice B. le 16/04/2006 à 01h55

J'ai suivi à la lettre tes explications et ça a marché ! Je suis super contente. Merci beaucoup.

Commentaire n°98 posté par anne-marie le 17/04/2006 à 18h47

http://img.over-blog.com/100x100/0/22/55/23/paper-light.jpg

Voici l'adresse mais rien ne fonctionne!!!!

Commentaire n°99 posté par sandisouri le 19/04/2006 à 10h59

tu as 2 fois body sur ta ligne, enlève en un ;)

Réponse de Fabrice B. le 19/04/2006 à 13h07

Alors voila j'ai tenté de mete un fond d'ecrans ur mon blog !J'ai donc lu oplusieurs sujets et a ma grande deception tout les changemùents s'effectuaient dans le bas de mon blog!! Ou et comment doije intervenir??

VOici mon css actuelle:

/*---------------- elements principaux ---------------*/

/*---------------- les styles ci-dessous affectes l'ensemble des éléments de la page n'ayant pas de style propre ou hérité --------------*/

body {margin:0px; padding:0px; background-color:#DED2B1; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}

h1 {color: #682B01; font-size: 20px;}

/*titre des pages*/

h2 {color: #682B01; font-size: 15px;}

h3 {color: #682B01; font-size: 12px;}

a {text-decoration:underline; color:#7D7D55; font-size:110%;}

/* liens des pages */

a:hover {text-decoration:none; color:#682B01}

/* liens survoles*/

legend {color:#000000; padding-left:5px; padding-right:5px;}

li {list-style-type:none;}

/*listes non ordonnees*/

img {border:0px none;}

/* images */

input {border:solid 1px #DED2B1; font-size:100%; background-color:#DED2B1; color:#000000;}

MErci d'avance

Commentaire n°100 posté par Alexandre le 20/04/2006 à 14h29

Accueil