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

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

- Publié dans : Fond du blog - Partager

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.

Voir les 303 commentaires

Précédent : [v2.0] Importer des photos Retour à l'accueil Suivant : [v2.0] Mettre une couleur de fond

Commentaires

Ouais sauf ke moi ca veut pas. :(
Jai changé l'image et jai tjr la meme.
Jsui découragé la.

Commentaire n°1 posté par Romain le 09/07/2005 à 10h38

Note: pour toute modification de CSS, il faut vider le cache de la page (Ctrl + F5) pour voir le changement.

Commentaire n°2 posté par fabrice le 09/07/2005 à 12h23

ça marche pas ! j'ai fait ctr+F5 mais je ne peux voir mon image qu'à travers le cadre "rechercher"

Commentaire n°3 posté par alfred le 09/07/2005 à 21h45

Je te conseille de lire ceci:

http://la.faq.over-blog.com/article-540814.html qui explique les erreurs fréquentes ;)

Commentaire n°4 posté par fabrice le 09/07/2005 à 23h25

ausecour g tous fait comme ta di pour mettre une tof en fond d'écrand mé ca marche po !!! ah vite aide moi !! stp !!!

Commentaire n°5 posté par wolfi le 10/07/2005 à 18h24

moi , ya pas marqué background !

Commentaire n°6 posté par lna candy le 04/08/2005 à 12h41

Il faut le rajouter ;)

Commentaire n°7 posté par Fabrice le 04/08/2005 à 13h08

j ai hebergé mon fond sur imageshack en 1024x800
j ai rajouté no repeat pour eviter que mon fond ne se repete

PROBLEME: l image ne s affiche qu en haut de l ecran..pas sur toute la page!

si j enleve no-repeat elle se repete sur toute la longeur de l ecran

alors que faire?

Commentaire n°8 posté par police06 le 07/08/2005 à 11h10

C'est le comportement normal. Donc, tu ne peux rien faire d'autre que choisir l'un ou l'autre (ou alors mettre une image plus grande, qui aura du mal à être téléchargée par les petites connexions.)

Commentaire n°9 posté par Fabrice le 07/08/2005 à 13h08

Ca fair 1/2 heure que j'essaie en répétant toutes les étapes et je n'y arrive pas. Je vous montre la ligne, est-ce que vous pouvez me dire la ou ça ne va pas?

Commentaire n°10 posté par ToTo le 09/08/2005 à 21h55

j'avais oublié le CSS

body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color: #00000;
background-image : url(http://fdata.over-blog.com/0/10/27/08/thumbs/coucher-de-thomas.jpg); }

Commentaire n°11 posté par ToTo le 09/08/2005 à 22h03

Si si ;) il y est.. Penser à vider votre cache: Ctrl +F5.

Et ce serai mieux avec:

background-image : url(http://idata.over-blog.com/0/10/27/08/coucher-de-thomas.jpg); }

bon courage;)

Commentaire n°12 posté par Fabrice le 10/08/2005 à 00h01

merci, mais ça ne le fait que dans la newletters, où il faut le mettre pour le fond du blog?

Commentaire n°13 posté par ToTo le 10/08/2005 à 13h47

Parce que tu l'as mis sur la ligne inpu au lieu de body ;)

Commentaire n°14 posté par Fabrice le 10/08/2005 à 15h01

non j'ai mis sur les 2 lignes et l'adresse IP c'est bien avec fdata (tu peut aller voir: http://resize.over-blog.com/0/10/27/08/coucher-de-thomas.jpg ) voici tout le début du CSS

/* ---------- Elements Principaux ------------- */
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;
background-image : url(http://fdata.over-blog.com/0/10/27/08/thumbs/coucher-de-thomas.jpg); color: #00000; }
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/10/27/08/thumbs/coucher-de-thomas.jpg); } /* bouton */

Commentaire n°15 posté par ToTo le 10/08/2005 à 15h09

1/ sur la ligne input, ca ne sert à rien. C'est le fond de tes boutons.

2/ sur la ligne body, thumbs/ est en trop ;)

Commentaire n°16 posté par Fabrice le 10/08/2005 à 15h29

qu'est-ce que ça fait ctrl+F5? Moi ça ne me change rien. (ça ne me remets même pas comme c'était au début.)

Commentaire n°17 posté par ToTo le 10/08/2005 à 15h38

et en plus si je change qq chose dans le CSS ça ne donne aucun résultat

Commentaire n°18 posté par ToTo le 10/08/2005 à 15h39

Il faut aller sur ton blog puis faire ctrl + F5... ca vide le cache: donc ca recharge les modifications !

Commentaire n°19 posté par Fabrice le 10/08/2005 à 15h48

J'ai réussi! maiscomment on peut faire pour l'agrandir? Elle est vraiment mini!!

Commentaire n°20 posté par ToTo le 10/08/2005 à 16h02

je t'ai dit d'enlever le thumbs/ dans l'adresse du fichier !!

Commentaire n°21 posté par Fabrice le 10/08/2005 à 16h02

Bonjour j'essaye de mettre un fond ecran mais ca ne marche 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/11/10/29/fond-20bois.jpg); }
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:#FFFFFF; color:#5675A4; } /* bouton */

Commentaire n°22 posté par Nicolas le 10/08/2005 à 17h26

Ca fonctionne. Il faut vider ton cache.. (Tu vas sur ton blog, et tu fais CTRL +F5)

Commentaire n°23 posté par Fabrice le 10/08/2005 à 18h02

mon image ne va pas et je veux la changer ; je n'y arrive pas. (j'ai fait ctrl+F5)

Commentaire n°24 posté par ToTo le 10/08/2005 à 22h41

j'ai l'impression qu'on ne peut changer qu'un certain nombre de fois ou un truc comme ça

Commentaire n°25 posté par ToTo le 10/08/2005 à 22h47

Non, on peut changer autant de fois qu'on veut.

Commentaire n°26 posté par Fabrice le 10/08/2005 à 23h14

ca a pa changé

Commentaire n°27 posté par flogypsie le 22/08/2005 à 12h40

Il est très utile ton blog, j'ai essayé de résoudre mon problème de fond. En vain !
En voici le morceau de CSS...

/* ---------- 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/11/56/18/fleurspales.jpg); background-repeat;}
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:transparent; color:#5675A4; } /* bouton */

Voilà, où est l'erreur que j'ai fait ? Pourquoi je ne vois nul part une moindre parcelle d'image que j'ai sous le nom fleurspales.jpg ?
Merci bcp !

Petzie

Commentaire n°28 posté par Petzie le 25/08/2005 à 10h44

tu as 2 petites erreurs:
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/56/18/fleurspales.jpg); background-repeat: repeat;}

il manque : avant url, et le repeat est faux ;)

Commentaire n°29 posté par Fabrice le 25/08/2005 à 12h30

moi non plus je ne peux pas changer j'ai fais comme il fallait sa marche pas j'ai demandé sur le forum il ne savent pas ce qui coince !
Le saurais tu ?

Commentaire n°30 posté par Emilie le 25/08/2005 à 15h47

meuuh je comprend pas.Tout à l'air bon sauf que l'image n'est pas là et que ça fais tout blanc comme fond d'écran.Help me !!

Commentaire n°31 posté par marie le 02/09/2005 à 01h16

bonjour,

a mon tour de demander de l'aide pour les fonds d'ecran. La manip semble pourtant facile mais rien ne se passe. Quelqu'un aurait il un idee pour un pauvre beginer ?

Merci d'avance

=le CSS=>
/* ---------- 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/12/46/62/whithsundays-map.jpg); }

Commentaire n°32 posté par raja-oz le 06/09/2005 à 17h42

Bonjour,

J'aimerais connaître la taille que mon image de fond devrait avoir pour couvrir tout le fond en une seule fois.

Merci !

Commentaire n°33 posté par Marina le 07/09/2005 à 08h26

marina> la taille de l'ecrna le plus grand qui visite ton site... Il faut penser que tout le monde n'a pas le meme ecran !
Et cette taille est plus grande que ce que tu peux heberger sur over-blog.

Commentaire n°34 posté par Fabrice le 07/09/2005 à 10h21

Merci :)

Commentaire n°35 posté par Marina le 07/09/2005 à 12h12

J'ai tout suivi mais ca marche pas... Merci de me dire les erreurs

/* ---------- 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/10/02/03/fond-blog.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 */

C'est bon ! problème résolu toute seule !

/* ---------- Elements Principaux ------------- */
body { margin: 0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: x-small; color: #00000; background-image: url(http://www.over-blog.com/0/12/84/90/wallpaper3.jpg); }

Ca marche paaaaaas! J'ai fait ctrl +f5 (je sais pas à quoi ça sert mais je l'ai fait !) Et ça marche pas, qqn peut-m'aider ?

l'adresse de l'image est fause.

Commentaire n°39 posté par Fabrice le 11/09/2005 à 19h23

salut, j'ai le même problème, ça ne passe, pas, même avec ctrl+F5...

/* ---------- Elements Principaux ------------- */
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; }
h1 { color: #5675A4; font-size: 17px;margin-top:5px } /*titre des pages*/
h2 { color: #5675A4; font-size: 13px; }
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-image: url(http://idata.over-blog.com/0/12/91/88/sakura-wings.jpg); } /* bouton */

Commentaire n°40 posté par lydie le 12/09/2005 à 15h37

lydie> il faut que tu le mettes sur la ligne body, pas sur la ligne input.

Commentaire n°41 posté par Fabrice le 12/09/2005 à 17h08

ouai, merciiiiiiiii!

Commentaire n°42 posté par lydie le 12/09/2005 à 17h47

J'ai du faire une erreur mais je sais pas la quelle. vous pouvvez m'aider svp
/* ---------- 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/10/55/70/auron.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°43 posté par charly le 13/09/2005 à 15h51

desolé probleme résolu je faisais crtl + f5 sur le css on lieu de le faire sur mon blog

Commentaire n°44 posté par charly le 13/09/2005 à 16h23

help !!!!! je comprends pas ce qui cloche. Pouvez vous m'aider s'il vous plait ?
/* ---------- 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/05/79/violet-017.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 */

Merci de votre aide

Commentaire n°45 posté par stef le 19/09/2005 à 15h33

il et manque un ) après l'adresse de l'image ;)

Commentaire n°46 posté par Fabrice le 19/09/2005 à 15h38

sniff !! non cela ne fonctionne toujours pas même avec la ) !!!

Commentaire n°47 posté par stef le 19/09/2005 à 15h46

voyez vous autre chose ? qui manque car ca ne fonctionne toujours pas :(
/* ---------- 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/05/79/violet-017.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 */

Merci encore de votre aide

Commentaire n°48 posté par stef le 19/09/2005 à 16h09

c bon, je ne sais pas ce que j'ai fais, mais ca fonctionne.
merci beaucoup

Commentaire n°49 posté par stef le 19/09/2005 à 16h53

J'ai écrit :
input { border:solid 1px #D8D7D7; font-size:100%;
background-image : url(http://idata.over-blog.com/0/13/35/58/sakura48.jpg; } /* bouton */
et maintenant, seul le texte apparait ! Le pire, c'est que même l'arrière-plan que je voulais n'apparait pas ! Quelle erreur j'ai fait ?

Commentaire n°50 posté par Nicodemia le 21/09/2005 à 11h32

Accueil