24 août 2010

(OverBlog) Mettre un fond dans l'entête

Poursuivons nos modifications de design avec l'entête. Vous pouvez placer votre bannière dans le CSS, mais je vous conseille plutôt de la mettre en HTML, vous pourrez ainsi faire un lien retour vers l'accueil dessus. Par contre, vous pouvez mettre un fond qui sera visuellement sous la bannière.

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
#top {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
#top {background-image:URL(adresse de la texture);}
Pour mettre une texture rectangulaire qui se répète seulement verticalement
#top {background-image:URL(adresse de la texture);background-repeat:repeat-y;}
Pour mettre une grande photo (990*hauteur voulue) qui ne se répète pas, qui est centrée et fixe
#top {background-image: url(adresse de l'image);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}

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

1 commentaire:

  1. Bonjour annak,

    J'ai essayé de collé :

    #top {background-image: url(adresse de l'image);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}

    Pour mettre une grande photo (990*hauteur voulue) qui ne se répète pas, qui est centrée et fixe.
    j'ai collé les écritures css dans design, accueil, entête, j'ai fait ctrl + F5, mais rien n'a changé.
    Peut-être parce que j'ai déjà une photo sur mon entête du blog mais elle est un peu déformée, et c'est pour cela que je voulais essayer ta procédure.
    Mais j'ai dû mal faire.
    Bon dimanche à toi
    Mon site : http://www.musculation83rpr.com, pour si tu as le temps de voir pourquoi cela n'a pas fonctionné.
    Merci
    Amitiés
    René

    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)