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.
[RÉSOLU] image de fond
  • Bonjour, j'aimerais mettre une image de fond sur mon blog à la place de la couleur bordeau actuelle. Comment fait-on ? j'ai l'adresse URL de l'image mais je ne sais pas où la mettre dans l'HTML.
    merci de votre aide
  • Bonjour ,

    Avant style colle:

    body {  background: url(adresse url de ton image) center center fixed no-repeat #3B0B0B;
                   -webkit-background-size: cover; /* pour Chrome et Safari */
                   -moz-background-size: cover; /* pour Firefox */
                   -o-background-size: cover; /* pour Opera */
                   background-size: cover; /* version standardisée */
                }
  • merci beaucoup Mehdi. j'ai mis un beau fond drapé rouge :) ça habille plus le blog
  • tant mieux  ;)

    je ne vois pas ton fond actuellement sur ton blog
  • Je comprend pourquoi on ne voit pas ton fond, ton adresse URL de fond n'est pas bonne


    voici la bonne adresse:


    au passage tu peux voir de visu que la couleur bordeaux #3B0B0B; du code que je t'ai mis se substitue à ton image quand elle ne s'affiche pas .
  • oui tu as raison. j'ai été voir sous Chrome et mon image de fond ne s'affiche pas!
    merci je vais essayer avec ton adresse URL
  • là tu vois le drapé rouge en fond ?
  • c'est bon, je le vois

    ton image d'origine ne couvrait pas initialement toute la largeur de mon écran de 23 pouce mais les lignes 

      -webkit-background-size: cover; /* pour Chrome et Safari */
                   -moz-background-size: cover; /* pour Firefox */
                   -o-background-size: cover; /* pour Opera */
                   background-size: cover; /* version standardisée */


    l'adapte à toutes les tailles d’écran

    donc c'est bon,  ton image couvre bien tout mon ecran


  • Ce fond est parfait vu le thème de ton blog   ;)


  • merci Mehdi. très beau!! j'adore mon nouveau fond :)
  • ton image a encore disparu

    il y a un souci d'adresse url
    actuellement en simulation je vois


    qui est pas une adresse d'image valide

    enregistre ton fond sur ton pc, heberge l'image ailleurs  et utilise son adresse url ensuite

    tu peux utiliser http://www.hostingpics.net/ par exemple pour héberger ton image de fond

    je viens de l'héberger pour toi, son adresse r url






  • ton image est revenu a l'instant
  • re bonsoir

    comme je suis motivé on va tester quelques changement sur ton blog

    en premier, tu peut remarquer une ombre bleu sur ton blog sous le menu horizontal.......on va la passer en rouge plus en accord avec ton fond de blog

    Avant style tu ajoute:

    #menu {
        box-shadow: 0 1px 5px #eb363b;
    }


    j'ai mis un la couleur #eb363b;  à la place du bleu

    tu peux régler la largeur de l'ombre qui est a 5px sur cette ligne de code

    __________________________

    au point ou ont en est, tu peux tester d'ajouter une ombre de même couleur sur tout le header (bord haut de l'image et menu


    ce qui donne en simulation




    si cela te plait avant style toujours tu ajoute:

    #blog-cover img {
        height: 100%;
        width: 100%;
        box-shadow: 0 1px 20px #eb363b;
    }

    __________________

    cette fois ci j'ai mis arbitrairement une ombre rouge (shadow) de 20 px...tu peux tester plus ou moins







  • autre modification possible, changer la couleur de la barre ob tout en haut qui est noir actuellement

    rendu en simulation en rouge



    avant style ajoute

    .ob-ShareBar--dark, .ob-ShareBar--dark + .ob-ShareBar--minified {
        background-attachment: scroll;
        background-clip: border-box;
        background-color: #eb363b;
        background-image: none;
        background-origin: padding-box;
        background-position-x: 0;
        background-position-y: 0;
        background-repeat: repeat;
        background-size: auto auto;
        border-bottom-color: #262626;
        border-left-color: #262626;
        border-right-color: #262626;
        border-top-color: #262626;
        color: #fff;

    ______________

    j'ai sélectionner ce rouge mais tu peux en sélectionner un autre

    j'ai laissé le fond de "recherche" noir pour attirer l’œil mais il est changeable aussi


  • Merci Mehdi pour tous ces changements. j'avais même pas vu l'ombre bleue. tu as l'oeil partout ;)  et pour la barre noire d'overblog ça me dérange pas
    je vais tester tout ça
  • et j'ai lu que plus tu mets une image de fond lourde plus ça met du temps à charger sur le blog. la mienne est assez lourde 400 ko!!