Partager l'article ! [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 vo ...
|
Le blog qui apporte les réponses à vos questions sur OverBlog: publication, gadget... Plus de 1 000 000 blogs sur OverBlog 37801 personnes connectées (ici: 1 ) Follow-me on Twitter |
Dimanche 3 juillet 2005
7
03
/07
/Juil
/2005
00:00
-
Publié dans : Fond du blog
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 :
8. Enregistrez votre fichier CSS en cliquant sur Enregistrer.
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); }
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.
Commentaires
Rechercher
Liste d'articles
- Ce n'est qu'un au revoir
- Barre OverBlog
- Images et fichiers: mise à jour
- Le partenariat nouveau est arrivé
- OpenOB, comment participer à OverBlog
- Top des blogs - Classements
- Le portail d'OverBlog fait peau neuve
- Facebook, Twitter, Wikio et autres annuaires
- Gestion des designs - Personnaliser son thème
- Gestion des images - Taille et optimisations
Bonjour Fabrice,
Merci pour tes explications. Je n'y suis pas arrivée. J'ai reconfiguré le design par défaut parce que toutes mes rubriques étaient descendues. Et le fond ne s'était pas enregistré.
Bonne journée,
Nadine
Salut Fabrice, j'ai effectue ta manip avec succes comme tu peux le voir sur mon blog, mon fond d'ecran est modifie.
Mai j'ai un autre souci, j'aimerais que la colonne du milieu reste blanche, sans fond. ( Je n'ai pas encore decide de quelle couleur je l'aimerais donc blance sera tres bien pour l'instant)
Je n'ai pas trouve comment faire, est- ce que tu pourrais m'aiguiller?Est-ce que je dois sulement appliquer mon fond sur les colonnes de droite et de gauche ? Ou y a t-il une autre solution?
J'ai deja tente de modifier la couleur de la colonne via le CSS mais ca n'a pas fonctionne, je suppose que le fond couvre tout une fois applique.
Merci beaucoup pour tes articles qui me sont tres utiles, je debute, je rame, mais je vais m'accrocher pour avoir un blog qui dechire.
#content {background: white;}
et voilà ;)
Ca fonctionne merci!
J'avais essaye mais en inserant un code couleur a la place de white.
Merci encore pour ton aide rapide et efficace, tu risques de me revoie regulierement :-)
merci :-)
Bonjour Fabrice...
Tout d'abord merci pour le boulot que vous nous permettez de faire entre toi et différents liens j'ai enfin réussi a mettre le nez dans le CSS et changer l'aspect de mon blog...
J'ai tout de même une ptite question (ben vi )est il possible d'avoir un fond propre a chacune de mes catégories d'articles ? Si oui dois je faire une modif dans le CSS pour avoir le fond " d'office" ?
Merci par avance pour ta réponse...Bonne journée...
Donc, beaucoup de boulot pour pas grand chose ;)
Ok...Merci je vais pas tester alors ;o)
Euh...je vais ptete abuser mais une autre ptite question...J'ai bien vu que lorsque tu veux mettre une image en fond d'ecran celle ci se répète...
j'ai lu le com de "police06" (en haut) ou tu lui réponds que malheureusement ou elle se trouvera en haut de la page ou alors elle sera décupler mais comment certains arrivent ils a avoir une image qui prends tout le fond de page sans qu'elle soit multiplier?
Je sais j'abuse mais c'est pas faute de chercher partout et là je ne vois pas... Merci pour ton aide ;o)
il faut rajouter des options CSS.
désolé pour ma derniére question j'ai du oublier d'ouvrir les yeux ! La réponse est juste au dessus ...Méa culpa ;o)
En regardant le blog, appuyer sur la touche F5 ;)
Appuyez sur la touche F5 ;)
Bon, j'ai tout fait comme il faut et ça ne marche pas :
body {margin:0px; padding:0px; background url: (http://accel4.mettre-put-idata.over-blog.com/0/49/89/78/sucettes.jpg); color:#F83487; font-family:Verdana, Helvetica,Arial,sans-serif; font-size:x-small;} {color:#F83487;}/*titre des pages*/
h2 {color:#F83487;}
h3 {color:#F83487;}
Voilà ce que j'obtiens ...
J'ai fait ctrl+F5 aussi et rien, le vent, la neige, toujours pareil ... .
background: url(http://..... ;)
moi, ça marche, mais comment, on fait pour la mettre l'image plus ur la droite ?
merci de votre réponse !!!!
j'ai un petit problème.
quand je ve changer de fond d'écran je ne pe plus car je n'ai plus le bouton enregistrer en bas. je fais comment?
vous s'avez si quelqun pe faire une banniere pour mon blog avec des anotation comme accueil , news etc ...
merci davance
mais seulement ma photo de fond se multiplie en je sais pas combien et j'aimerais la voir en grand et une seule fois !
quelq'un voit mon problème et peut m'aider ??
Quelqu\\\'un peut il me dire ou j\\\'ai fauté...
Merci
PS: J\\\'ai bien entendu vidé le cache!!
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; background-image url: (http://idata.over-blog.com/0/40/41/69/palmiers.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 */
le : était pas à sa place ;)
Salut à tous !!!!
il y'a à peine 1 heure, j'avais une fond, mais, il a disparu, et je n'arrive pas à le remettre, si quelqun peut me dire ce qui ne vat pas, ça m'aiderai beaucoup ( j'ai bien vidé mon cache).Merci d'avance
body{margin:0px; font-family: Verdana, Helvetica, Arial , sans-serif; font-size:x-small;color:#00000; background-image:url(http://img.over-blog.com/100x100/0/49/34/06/lulufd.jpg);}
Comme d'autre je demande votre aide, car cela ne marche pas :((
Voila ce que j'ai :
/*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*/
/***************************************/
/*---------------- 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; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;
background-image : url(http://img.over-blog.com/100x100/0/41/21/65/paper_fond.jpg);}
/*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:#FFFFFF; color:#000000;}
/* boutons, champs texte */
HELP !!! pourquoi cela ne marche pas ! :((
/*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*/
/***************************************/
/*---------------- 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; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;
background-image : url(http://img.over-blog.com/100x100/0/41/21/65/paper_fond.jpg);}
/*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:#FFFFFF; color:#000000;}
Bonjour,
J'essaie de mettre un fonds d'écran, mais n'y arrive pas malgré tous vos conseils..
body { margin:0px; font-family: Verdana, Arial, sans-serif; font-size:x-small; background:#FFF; }
h1 { color: #CC0000; font-size: 17px;margin-top:5px } /*titre des pages*/
h2 { color: #CC0000; font-size: 13px; }
h3 { color: #CC0000; font-size: 12px; }
a { text-decoration:underline; color:#CC0000; font-size:110%; } /* lien */
a:hover { text-decoration:none; color:#CC0000}
legend { color:#CC0000; padding-left:5px; padding-right:5px;}
li { list-style-type:none; }
img { border:0px; } /* image */
input { border:solid 1px #CC0000; font-size:100%;
background: url(http://www.guideplanete.net/Ciel1093c.jpg);}
quelle erreur ai-je fait?
merci du coup de main.
salut,
désolé mais moi non plus je n'arrive pas Voilà le début de mon css
body {margin:0px; padding:0px; background-color:#FCE4FA; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}
h1 {color: #FFFFFF; font-size: 20px;}background-image:URL : Protocole HyperText Transfer (HTTP)
/*titre des pages*/
h2 {color: #FFFFFF; font-size: 15px;}
h3 {color: #FFFFFF; font-size: 12px;}
a {text-decoration:none; color:#AA0DA6
-> l'url est fausse.
-> ca ne se met pas là.
Voici ce que j'ai mis dans mon CSS je n'ai pas de souci au niveau de mon fond d'écran mais du changement de curseur, alors je ne vois vraiment ce qui cloche, surtout après avoir compris le truc, et j'ai fait toutes les étapes^^" merci d'avance
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;color:#00000;background-image:url(http://img346.imageshack.us/img346/9527/mywalloz1.png); }
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 */<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=[mimikanime.over-blog.com].dat&ft=0&st=20 211&dd=rainbw2">
input { border:solid 1px #D8D7D7; font-size:100%; background-image: url(http://idata.over-blog.com/0/08/88/66/other/chatanimepf0.gif); } /* bouton */
Je n'arrive pas fond écran et je ne vois pas où écran couleur rose j ai copie CSS. au dessous:
body {margin:0px; padding:0px; background-image:url(http://fdata.over-blog.com/0/56/31/55/thumbs/background2.jpg); 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;}
Merci j attends votre réponse
Je vous remercie et je cherche votre Faq expliquer..
cordialement...
/* ---------- 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/50/37/67/rozenmaiden5.jpg); color: #00000; }
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:#FFFFFF; color:#5675A4; } /* bouton */
ou est ma faut svp
Recommence au fond tout blanc mais j'ai mis mais tout seul change je ne comprends pas vous pouvez vérifié merci et aussi écriture trop gros ça vient où? je veux comme avant petit écriture!!! merci
J'attends votre réponse.
Cordialement
body {margin:0px;padding:0px; background-image:url(http://fdata.over-blog.com/0/56/31/55/thumbs/valen-nolinkbk3.gif); font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}
/* ---------- Elements Principaux ------------- */
body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;color:#00000;
background-image:url(http://accel17.mettre-put-idata.over-blog.com/0/59/92/70/fate-stay-night-/saber17.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 */
Et pour éviter la répétition, il faudrait avoir une image plus grande.
Que faire?
Par avance merci.
Je me doute que mon pauvre 234eme commentaire risque de ne pas être lisible, je voulais juste vous remercier pour votre tutoriel hyper compréhensible et qui m'apprend pleins de choses!
Grace à vous je m'amuse autant à bidouiller mon blog en CSS qu'à créer mes articles...
Encore merci
(et oui, meme le 234eme est lu.)
J'essaye de modifier mon fond d'écran,mais sans succés.Ci-dessous la section CSS concernée
Pouvez vous m'aider?
D'avance merci
body {margin:0px; padding:0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:x-small;background-image:url(http://accel16.mettre-put-idata.over-blog.com/0/57/09/28/page-de-garde-definitive.jpg);}
h1 { color: #5B6B7C; 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 */
Attention: l'url donné est fausse :)
Pour le fond des articles, ca se passe sur les lignes .articles et .article
Il faut rajouter l'attribut background ;)
Bilan: tout ce que je peux dire, c'est qu'il faut rajouter le fond sur la ligne body du css ;)