Fiche N°2 - Modifier la couleur de fond avec les css

Objectif : Faire ressortir les pages, modifier la couleur du fond

Apprentissages : Utiliser les css pour faire ressortir quelques éléments de la structure des pages

Faire apparaître les pages sur un fond noir

Editez le fichier “perso.css” et mettez dedans : [1] [2]

body {
     background: none repeat scroll 0 0 #000;
}
.page {
      background-color: #AAAAAA;
}

En effet, toutes les pages générées par SPIP se trouvent dans un div dont l’id est "page". Le code ci-dessus permet de faire ressortir la page par-dessus le body (le body étant l’élément qui encadre tout le code html « visible »).

Jouer avec le padding

Transformez le code précédent de la manière suivante :

body {
     background: none repeat scroll 0 0 #000;
}
.page {
      background-color: #AAAAAA;
      padding: 30px;
}

Le padding [3] permet de s’assurer que la zone écrite ne « colle » pas complètement avec les bords de la page (padding 0). Vous pouvez régler cette distance comme vous le voulez.

Mettre une image de fond

Déposez le fichier squelettes/css/img/background.png avec une image pas trop grosse, au format png, [4] avec un fond transparent, puis modifiez le fichier perso.css :

.page {
      background-image:url(img/background.png);
      background-position: center center;
      background-repeat: no-repeat;
}

Bien sûr, vous pouvez jouer avec :

background-position : le premier center donne la position latérale (essayez avec left et right), le second center donne la position verticale (essayez top et bottom).
background-repeat : essayez repeat, repeat-x et repeat-y

[1] On pourra utiliser ColorZilla pour sélectionner des couleurs agréables et "garanties Web"

[2] Sous zpip, vous devrez remplacer .page par #wrapper

[3] Notez que le padding a tendance à "pousser" les cadres de l’élément parent vers l’extérieur dans les navigateurs ; pour ajuster la taille d’un div que vous voudrez afficher avec précision, préférez recourir aux unités "px" (pixels) et déduisez de la taille totale désirée l’encombrement occasionné par le retrait (padding) : cela suppose évidemment des valeurs dédoublées puisque le retrait s’opère des deux côtés du contenu.

[4] par exemple cette image :