Dans cette lecon, vous apprendrez comment appliquer des couleurs et des couleurs d'arriere-plan a vos sites Web. Nous etudierons egalement des methodes evoluees pour positionner et controler les images d'arriere-plan. Les proprietes CSS suivantes seront expliquees :
La propriete color decrit la couleur d'avant-plan d'un element.
Par exemple, supposons que nous voulions tous les titres du document en rouge fonce. Les titres sont tous balises avec l'element HTML <h1>.
Le code suivant donne aux elements <h1> une couleur rouge.
h1 {
color: #ff0000;
}
On peut definir les couleurs avec des valeurs hexadecimales comme dans l'exemple precedent (#ff0000), ou avec les noms des couleurs ("red"), ou avec des valeurs RGB (rgb(255,0,0)).
La propriete background-color decrit la couleur d'arriere-plan des elements.
L'element <body> est le receptacle de tout le contenu du document HTML. Pour changer la couleur d'arriere-plan
d'une page entiere, il faudrait donc appliquer la propriete 'background-color' a l'element <body>.
On peut aussi appliquer une couleur d'arriere-plan a d'autres elements y compris les titres et le texte. Dans l'exemple ci-dessous,
Des couleurs d'arriere-plan differentes sont appliquees aux elements <body> et <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Remarquez que nous avons applique deux proprietes a <h1> en les separant par un point-virgule.
La propriete CSS background-image sert a inserer une image d'arriere-plan.
Comme exemple d'image d'arriere-plan, nous utilisons le papillon ci-dessous. Vous pouvez telecharger l'image pour l'utiliser sur votre propre ordinateur (en cliquant sur le bouton de droite de la souris et en selectionnant Enregistrer l'image sous , ou vous pouvez utiliser une autre image si vous voulez.
Pour inserer l'image du papillon en arriere-plan d'une page Web, appliquez simplement la propriete background-image
a l'element <body> et indiquez le chemin de l'image.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Remarquez la facon dont nous avons indique le chemin de l'image avec url("butterfly.gif"). Cela signifie que l'image se trouve dnas le meme dossier que la feuille de style. On peut aussi appeler des images dans d'autres dossiers avec url("../images/butterfly.gif"), ou meme sur Internet en donnant l'adresse complete du fichier : url("http://www.html.net/butterfly.gif").
Avez-vous remarque, dans l'exemple precedent, que le papillon etait repete par defaut horizontalement et verticalement pour couvrir
la totalite de l'ecran ? Ce comportement est controle par la propriete background-repeat.
Le tableau suivant decrit les quatre valeurs differentes de background-repeat.
| Valeur | Description | Exemple |
|---|---|---|
Background-repeat: repeat-x | L'image se repete horizontalement | Afficher un exemple |
background-repeat: repeat-y | L'image se repete verticalement | Afficher un exemple |
background-repeat: repeat | L'image se repete horizontalement et verticalement | Afficher un exemple |
background-repeat: no-repeat | L'image ne se repete pas | Afficher un exemple |
Par exemple, pour eviter la repetition d'une image d'arriere-plan, le code devrait ressembler a ceci :
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
La propriete background-attachment definit si l'image d'arriere-plan est fixe ou bien defile avec l'element conteneur.
Une image d'arriere-plan bloquee ne bougera pas avec le texte lorsque le lecteur fait defiler la page, au contraire d'une image d'arriere-plan non bloquee qui defilera avec le texte de la page Web.
Le tableau suivant decrit les deux valeurs differentes de background-attachment. Cliquez sur les exemples
pour voir la difference entre defiler et fixe.
| Valeur | Description | Exemple |
|---|---|---|
Background-attachment: scroll | L'image defile avec la page (non bloquee) | Afficher un exemple |
Background-attachment: fixed | L'image est bloquee | Afficher un exemple |
Par exemple, le code suivant bloquera l'image d'arriere-plan.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Par defaut, l'image d'arriere-plan se positionnera dans le coin superieur gauche de l'ecran. La propriete background-position
permet de changer cette position predefinie et de placer l'image d'arriere-plan n'importe ou a l'ecran.
Il y a plusieurs methodes pour fixer la valeur de background-position. Par contre, elles se presentent toutes sous
la forme d'un jeu de coordonnees. Par exemple, la valeur'100px 200px' positionne l'image d'arriere-plan a 100px depuis la gauche
et a 200px depuis le haut de la fenetre du navigateur.
Les coordonnees peuvent s'exprimer en pourcentages de la largeur de l'ecran, ou en unites fixes (pixels, centimetres, etc.), ou on peut utiliser les mots-cles "top", "bottom", "center", "left" ou "right". Le modele suivant illustre ce systeme :
Le tableau suivant fournit quelques exemples.
| Valeur | Description | Exemple |
|---|---|---|
background-position: 2cm 2cm | L'image est positionnee a 2 cm de la gauche et a 2 cm du haut de la page | Afficher un exemple |
background-position: 50% 25% | L'image est positionnee au centre et a un quart de la page vers le bas | Afficher un exemple |
background-position: top right | L'image est positionnee au coin superieur droit de la page | Afficher un exemple |
L'exemple de code a suivre positionne l'image d'arriere-plan dans le coin inferieur droit de la page :
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
La propriete background est un raccourci pour toutes les proprietes listees dans cette lecon.
Avec background, on peut comprimer plusieurs proprietes et donc ecrire une feuille de style plus courte,
ce qui en facilite la lecture.
Par exemple, les cinq lignes suivantes :
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
On peut obtenir le meme resultat avec background en une seule ligne de code :
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
La liste de commande est la suivante :
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Si une propriete manque, elle prend automatiquement sa valeur par defaut. Par exemple, si on supprime
background-attachment et background-position de l'exemple :
background: #FFCC66 url("butterfly.gif") no-repeat;
Ces deux propriete non definies prendront tout simplement leurs valeurs par defaut, qui sont comme chacun sait "scroll" et "top left".
Dans cette lecon, vous avez deja appris des techniques nouvelles qui seraient impossibles avec HTML. L'aventure continue dans la lecon suivante qui examine la large gamme de possibilites de CSS pour decrire les polices.