24 août 2010

(OverBlog) Mettre un fond dans tout l'écran

Parce qu'un blog tout blanc, c'est tristounet et assez fatigant pour les yeux clairs, voici comment mettre un fond qui occupera tout l'écran. Nous verrons ensuite qu'il est possible d'en placer dans chaque partie du blog.

Pour connaître les différents fonds possibles : découvrir les background

Pour commencer, allez dans le CSS : Design > Mode CSS
S'il s'agit de votre première modification de design, cochez Appliquer ma feuille de style personnalisée, enregistrez puis complétez cette ligne avec ce qui est en rouge :

Pour mettre une couleur en fond
body {background-color: #800080;}
Si vous ne connaissez pas les codes couleur, regardez cet article

Pour mettre une texture carrée qui se répète horizontalement et verticalement
body {background-image:URL(adresse de la texture);}
Pour mettre une texture rectangulaire qui se répète seulement verticalement
body {background-image:URL(adresse de la texture);background-repeat:repeat-y;}
Pour mettre une grande photo (1024*768px minimum) qui ne se répète pas, qui est centrée et fixe
body {background-image: url(adresse de l'image);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}
Bon à savoir :

background-attachment:fixed : L'image est fixe lorsque la page défile.
background-attachment:scroll : L'image défile avec la page. Sachant que si le fond n'est pas fixe, il est sous-entendu qu'il est mobile.Il n'est donc pas utile de rajouter background-attachment:scroll

Après vos modifications, pensez à
  • enregistrer
  • faire CTRL+F5 sur le blog pour écraser le cache et voir les changements à l'écran

20 commentaires:

  1. Bonjour
    J'ai fait ce que vous avez dit pour mettre une photo en fond d'ecran mais ça n'a pas marché par contre la couleur du titre et le calendrier ont changé de couleur;le contenu de l'article aussi a changé de couleur

    RépondreSupprimer
  2. Bonjour Sandrine :)
    Je vois déjà une erreur dans ton CSS. Ici, il y a 2 accorlades fermantes à la suite :

    body {
    background-image:url();
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
    background-color: #fafafa;
    color: #787878;
    }
    }
    Ce qui explique ton problème.
    Il faut en effacer une.
    Ensuite, en complétant, ça fonctionne :
    body {
    background-image:url(http://nsm04.casimages.com/img/2010/10/02//101002043239249686856298.png);
    background-position:center;
    background-attachment:fixed;
    background-color: #fafafa;
    color: #787878;
    }

    RépondreSupprimer
  3. bsr
    j'ai galéré aujourd'hui j'ai mis un fond mais lorsque je fais le changement dans le design Changer l'image de fond l'ancien est tjr actif même en supprimant le cache f5... ex actuel
    http://idata.over-blog.com/1/08/91/14/DECORATION/FOND-BLOG/1--1-.gif
    changement en
    http://a31.idata.over-blog.com/1/08/91/14/DECORATION/FOND-BLOG/1--2-.gif
    j'ai une amie qui change de fond de blog tous les jours sans problème en passant par le coche design, que se passe t-il sur mon blog

    j'ai changé aussi la couleur commentaire et polices mais non pris en compte. grrrr
    merci par avance
    sylvie

    RépondreSupprimer
  4. Bonjour Sylvie :) As-tu réalisé des changements en passant par Personnalisation avant de les faire dans le CSS ? Les 2 fonctions ne sont pas cumulables et posent souvent problème.

    RépondreSupprimer
  5. Voila mon problème, j’ai mit une image comme fond mais à l’extrémité de l’image (gauche, droite) on voit le fond de couleur noir =(
    Comment on fait pour que l’image prend tous le fond et sans répéter l'image, plus qu’on voit ces affreuse barre noir ??

    RépondreSupprimer
  6. Bonjour FreeFallGames, ton image, large de 1200px, n'est pas assez grande pour remplir ton écran. Il n'est pas possible de redimensionner un fond grâce au CSS. Il faut refaire une image plus large : 1600px devrait suffire pour 95% des écrans.

    RépondreSupprimer
  7. Merci annak, tu m'aide beaucoup et aussi merci pour ton blog qui est trés bien !!

    RépondreSupprimer
  8. Salut j'ai essayer les conseil dit ci-dessus mais sans résultat je souhaiterais mettre deux bande d'images sur les coter du blog comme sur ce blog : hinata-online.over-blog.com est-ce qu'il faut que je fasse un image sur mesure ou normal mais j'aimerais aussi qu'elle sois adapter pour tout les écrans . merci d'avance ^^'

    RépondreSupprimer
  9. j'ai bien reussit a changer mon fond une premiere fois mais avec ce mode: que dale... lol en faite je voudrais enlever le tour violet autour de mon article

    RépondreSupprimer
  10. Bonjour a toi

    Je cherche quelqu'un qui puisse m'aider a être moins bête, je voudrai espacer les modules de mon blog sans avoir a inserer des modules vierges, le probleme c'est qu'il reste des traits
    De plus je ne sais pas comment aller dans ce fameux css ce serai dejà bien

    Si tu as la patience mon blog www,skyplanes.fr et adresse mail : patricknourry@sfr.fr

    Merci a toi

    RépondreSupprimer
  11. Juste un petit comm pour dire que je suis RAVIE de découvrir cet endroit plein d'astuces!!!

    Je vais enfin pouvoir me lancer dans ce CCS qui me fait si peur...! ;) Youhouuu!!

    Mille mercis, je pars poursuivre ma découverte de cet endroit...:)

    RépondreSupprimer
  12. Bonjour !
    Je n'arrive pas a aller dans design ?
    Voila si vous voulez voir ce que je vois :
    http://nsa32.casimages.com/img/2012/12/05/121205035715187444.png
    Merci

    RépondreSupprimer
  13. Hey !
    J'essaie en vainc de mettre cette photo-ci :
    http://img11.hostingpics.net/pics/577929fonddcrannmotifcossaissimple1.png
    en fond de blog, mais quand je vais dans "thème" puis dans "configurer" je ne peux cliquer que sur "html". Alors je clique. Nulle trace de CSS -j'ai cherché tout les moyens possibles-
    J'ai donc ensuite essayé malgré tout de mettre :


    puis j'ai enregistré et suis allée sur mon blog pour taper "ctrl+f5" mais rien.
    j'ai tenté pleins de possibilité mais en deux heures je n'ai rien réussi à faire.

    Je te demande donc de l'aide toi qui détiens le pouvoir ! Ô grande prêtresse !! \o/
    -ne sois pas choquée par le titre du blog surtout ! Si j'arrive à mettre ce *ù*$ù:?%! de fond et que j'ai réussie à faire quelques autres retouche sans avoir besoin de ton aide -j'espère-, je l'expliquerai dans un article ! X3-

    RépondreSupprimer
    Réponses
    1. excuse-moi, après la phrase "j'ai essayé malgré tout de mettre :" rien ne s'affiche. J'ai oublié d'enlever les "<>" comme une andouille. Mais j'espère que tu vois ce que j'ai pu mettre.

      Supprimer
  14. Bonjour Annak, merci pour les tips. Hélas, j'aimerais fixer mon image de fond (background-attachment: fixed dans la partie "body"), mais impossible de modifier une ligne de CSS : les codes apparaissent mais aucune insertion possible. Est-ce qu'il faut être en Premium pour pouvoir le faire ?

    RépondreSupprimer
  15. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
    Réponses
    1. Ce commentaire a été supprimé par l'auteur.

      Supprimer
  16. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  17. Bonjour Anna, je vous contacte car je n'arrive pas à faire une manipulation concernant le fonds de mon écran. J'ai un désign que j'ai choisi sur OB qui est bordeaux-rose en en-tête et marron dans le corps mais j'ai voulu mettre en plus un fonds écran pour les côtés couleur jaune-orangé sur mon site mais celui se répète plusieurs fois. Je suis allée dans "GERER" puis "THEME", et dans "IMAGE DE FOND" j'ai indiqué l'adresse http... de l'image choisie, mais elle démultipliée et je ne sais pas comment procéder pour qu'il n'y ait qu'une image qui apparaisse. Merci de m'indiquer la démarche à faire pour que je puisse mettre un fonds autour du thème existant. Bonne soirée à vous. Bien cordialement

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)