Overblog
Editer l'article Suivre ce blog Administration + Créer mon blog

Mettre une image en fond de Blog

Publié le par Laglesine

  • Attention bidouiller le CSS n'est pas sans risque, vous pouvez perdre votre mise en page et ce, de manière irréversible ! Alors, penser à faire une sauvegarde de votre code CSS en le copiant-collant dans un fichier texte (word, note pad, bloc note, writer ou autre) afin de pouvoir le récupérer en cas de problème.
  •  ____________________________________________________________________________
  •  
  •  
  •  
  • Pour mettre une image en fond de Blog (principes valables pour la V2 d'over-blog)

Il faut une image assez grande de la taille d'un écran c'est-à-dire 1024x768 pixel, une photo ou bien un scan d'une de vos réalisations.

L'image doit ensuite être téléchargée sur
over-blog dans les documents.
Aller dans l'administration puis cliquer sur Documents (1)
Ensuite cliquer sur Images & Albums photos (2)
fondblog.jpg
Ensuire, (ça c'est mon astuce) je désactive l'assistant de téléchargement des dosuments afin de pouvoir charger mon image dans sa taille d'origine (uniquement pour les grande images). Pour le désactiver, cliquer sur la ligne bleue "désactiver l'assistant", vous pourrez le réactiver ensuite.

fondblog2.jpg
Puis télécharger l'image souhaitée, ATTENTION, afin de conserver votre taille d'origine décocher l'option "optimiser les images", sinon OB redimensionne les images de grande taille en 600x600 pixels.


fondblog3.jpg

Une fois l'image téléchargé, aller dans l'otion design (1)
Et si vous n'êtes pas en mode avancé, cliquer sur" mode avancé"(2)
fondblog4.jpg
La fenêtre des CSS s'affiche, pour modifier votre CSS, cocher "je souhaite modifer ..."
fondblog5.jpg

Le code à modifier :
code original :
body {margin:0px; padding:0px; background-color:#000000 ; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#FFF;}

Au préalable vous aurez repérer et copier l'adresse de l'image dans la rubrique "Images & Album photo" zn cliquant sur le petit marteau sous votre image choisie.

code pour mettre une image en fond :

body {margin:0px; padding:0px; background:URL(http://idata.over-blog.com/0/60/25/11/novembre/votre-image.jpg); background-repeat:no-repeat;background-position:left; background-attachment:fixed;  font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small;}

*****************************************************
Explication du code :

body = corp du blog
{margin:0px; = taille des marges
padding:0px; = taille des espacements
background:URL(http://idata.over-blog.com/0/60/25/11/novembre/fond2.jpg); = adresse de l'image de fond 
background-repeat:no-repeat; = soit le fond est affiché une seule fois (si vous mettez no-repeat) soit il est affiché en mosaïque (si vous mettez repeat après les :)
background-position:left; = position de l'image left=gauche right=droite center=centrée
background-attachment:fixed;  = mettre cette ligne si vous souhaitez que votre fond soit fixe et ne bouge pas avec l'ascenseur, sinon supprimer cette ligne..
font-family: Verdana, Helvetica, Arial, sans-serif; = police
font-size:x-small; = taille de la police
}


***************

Commenter cet article
B
bonjour, cela faisait un momment que je me battai avec cette procédure, l'aide que vous avez mis en page est précieux et nous rends service, merci mille fois
Répondre
V
Merci beaucoup pour vos précieux conseils qui me sont bien utiles pour créer mon blog. <br /> Pouvez-vous m'indiquer comment vous avez créé le fond de vos articles "noir transparent"? J'ai bien réussi sur mon blog à rendre ce fond transparent mais j'aimerais le colorer un peu pour facilité la lisibilité. <br /> Je m'interroge, je cherche, j'essaie, je tâtonne mais pour l'instant aucun résultat concluant.<br /> Bien cordialement
Répondre
E
Bonjour,<br /> <br /> un grand merci pour ces explications. Toutefois je n'arrive pas à désactiver l'assistant ni à décocher l'option "optimiser les images... as tu une solution? d'avance un merci pour ton aide...
Répondre
M
Bonjour,<br /> Je suis en train de faire des essais pour créer mon site. Et je te remercie, car c'est l'explication la plus claire que j'ai trouvée, pour mettre une image en fond de blog. J'ai réussi. Cependant, j'ai un souci, je voudrais que le fond de mes articles conserve un fond d'une couleur différente et je ne sais pas comment faire. Pourrais-tu l'expliquer, s'il te plaît ?<br /> Je te remercie pour tes conseils. Bonne journée.
Répondre
L
Merci Mad pour ce gentil compliment !
A
Je n'ai pas réussi à désactiver l'assistant. Comment fais-tu ?
Répondre
L
je suis allée voir ton blog, mais tu ne sembles pas chez Overblog... Et je ne sais pas comment on fait chez les autres distributeurs de blog...Désolée je ne peux pas t'aider  sur ce point.