Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
[RESOLU] mettre une photo en fond d'article
  • Bonsoir,
    J'ai cherché mais en vain... alors je tente ma chance ici =)
    je cherche désespérément mettre une image en fond de ma colonne ou ce trouve les articles. on peux la modifier en allant dans gerer/theme/configurer/ et puis dans police/couleur de fond, quelques choix sont possible mais je souhaite pour ma part mettre une image de mon choix. j'ai cherché dans le mode avancé, mais je m'y connais pas assez pour fair la manip, si quelqu'un peu m'aidez ça serais super sympa =)
    merci à tous

    mon blog : http://lemondeseb.over-blog.com/
    ( en gros je veux mettre une image la ou il y du blanc sur mon blog )
  • Bonsoir

    tu doit aller dans: "gérer"...."thème"...."éditer" pour intervenir sur le code directement


    Tu dois chercher la dernière balise  </style>. de ton code qui marque la fin de ton css (utilise la fonction "rechercher" de ton clavier: CTRL +F)


    capture d'ecran  (tu ne tiens pas compte du numéro de ligne propre à mon code)


    pour repérer cette balise tu verra légèrement en dessous "head"...et plus loin "body"

    tu colle ensuite
    JUSTE AVANT  </style>. (puis tu clique sur "enregistrer" ) ( tout coller sans oublier les parenthèses)

    .content-global {
        margin: 0 20px;
        background-color: #F2E4A9;
    }

    .left-content {
        float: left;
        margin: 0 20px 0 0;
        width: 620px;
        background-color: #D3CCAD;
    }

    __________________

    explication

    en premier une image du rendu

    capture d’écran


    en fait j'ai arbitrairement modifier la couleur de fond du global (jaune pale)

    .content-global {
        margin: 0 20px;
        background-color: #F2E4A9;
    }

    et le fond du corps de ton article (kaki)

    .left-content {
        float: left;
        margin: 0 20px 0 0;
        width: 620px;
        background-color: #D3CCAD;
    }



    si tu ajoute uniquement le kaki du fond de l'article, le reste du "global" restera blanc (au choix donc)

    _______________

    explication 2

    ici

    .content-global {
        margin: 0 20px;
        background-color: #F2E4A9;
    }


    tu vois margin: 0 20px;

    le 20 px correspond a la largeur de bande blanche a droite et gauche de ma capture d’écran...tu peut la diminuer ou l'augmenter selon tes souhaits

    _________________

    donc en résumé tout se passe
    JUSTE AVANT  cette fameuse </style>

    ne pas oublier de cliquer sur "enregistrer" après ajouts des lignes de codes

  • Sur cet exemple j'ai mis des fond de couleur (code couleur jaune pale #F2E4A9;  et kaki #D3CCAD;

    si tu veux une image tu remplace  background-color:  par:  background-image:url (adresse de ton image);
  • merci pour tes explications et d'avoir répondu rapidement à ma demande, ta capture d'écran m'éclaire un peu mieux. Par contre mon but à moi ce n'est pas changer juste la couleur,c'est de mettre une image que j'ai crée qui prendrais toute la surface blanche, et sans les marge blanche sur les côtés.

    pour te donnée une idée, voici l'image que je souhaite mettre
    http://img15.hostingpics.net/pics/280989fondlemondedeseb.jpg

    je l'avais mise sur l'ancienne version d'over blog mais ici je trouve pas.
  • j'avais pas vu que tu avait posté pour une image...
    j'ai éssayé mais ça ne s'affiche pas, je doit pas être au point lol

    en gros j'ai mis ça :

                .content-global {
        margin: 0 20px;
        background-image:url (http://img15.hostingpics.net/pics/280989fondlemondedeseb.jpg);
    }

    .left-content {
        float: left;
        margin: 0 20px 0 0;
        width: 620px;
        background-image:url (http://img15.hostingpics.net/pics/280989fondlemondedeseb.jpg);
  • Ou je me suis planté ?
  • JUSTE AVANT  cette fameuse </style> tu ajoute


    .global  {
        background-position: center top;
        background-repeat: repeat;
    }


    capture d'écran


  • je pense deja que tu a du faire une erreur de copier/coller car on voit la couleur kaki en fond sur ton blog alors qu'elle est pas mentionné dans le code que tu me  cite

    .content-global {
        margin: 0 20px;
        background-image:url (http://img15.hostingpics.net/pics/280989fondlemondedeseb.jpg);
    }

    .left-content {
        float: left;
        margin: 0 20px 0 0;
        width: 620px;
        background-image:url (http://img15.hostingpics.net/pics/280989fondlemondedeseb.jpg);
  • la c'est bon, je vois que tu a réussi

    je suis passé sur global au lieu de content global pour englober tout le fond blanc y comprit celui du menu
  • ça fonctionne ! quelques modif à faire sinon ça marche.
    l'image ce répète à droite et à gauche c'est bien ça ?

    comment puis-je supprimer les deux marges blanche avec le trait noir à droite et à gauche

    si je peux abuser de ta gentillesse ^^
  • autant pour moi, je crois que c'est mon image =)
    merci à toi
    bonne soirée, et bonne nuit
  • pour les marges

    on est en mode 'repeat....... l'image manquant un peu de largeur elle se répète d’où la marge brune a droite

    si on passe en "no-repeat.....cette fois ci j'ai les marges blanche des 2 cotés mais elles sont toujours présentes

    pour un effet de "reliure" mobile/fond fixe
    tu peux tester et ajouter aux lignes

     background-attachment: fixed;

  • j'ai rectifié mon image et j' l'ai agrandi, maintenant c'est nickel !
    ah petit détail, j'ai la description de mon dessin sur le côté droit de mon dessin, comment fait t'on pour le mettre centré en dessous du dessin ?
  • je vois plus ton dessin mais "aucun article"

    nickel maintenant en effet et mieux a droite... ;)