8 sept. 2010

(Blogger) Mettre un fond dans le pied de page

Pour commencer, allez dans le CSS : Présentation > Modifier l'HTML et complétez la ligne avec ce qui est en rouge

Pour mettre une couleur en fond

.footer-outer {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
.footer-outer {background-image:URL(adresse de la texture);}
Pour mettre une texture rectangulaire qui se répète seulement verticalement
.footer-outer {background-image:URL(adresse de la texture);background-repeat:repeat-y;}
Pour mettre une grande image (même largeur que l'entête) qui ne se répète pas, qui est centrée et fixe
.footer-outer {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

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

Après vos modifications, pensez à enregistrer. Les modifications apparaissent immédiatement à l'écran.

2 commentaires:

  1. Bonjour Annak !

    Merci beaucoup pour cet article, le seul qui m'a donné la solution à mon problème: changer la couleur du footer. J'avais presque tout essayé sans succès, mais l'ajout de ce simple CSS a tout résolu. Ma barre ne colle pas encore à l'idée que je m'en fais, mais grâce à toi, commence à s'en rapprocher :)

    Elsa

    RépondreSupprimer
  2. Argh, j'ai écrit trop vite !
    Je rectifie, Bonjour Anna.k !

    :)

    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)