Différents effets CSS permettent de définir une couleur ou une image d'arrière plan
pour un élément ou une page toute entière.
Attention à ne pas utiliser une
couleur ou une image de fond qui rendrait moins lisible le texte de la page.
Cliquez sur les exemples de code CSS pour voir le résultat appliqué à la colonne de droite ou l'un de ses éléments contenus.
|
background-color : couleur de fond d'un élément
|
|
La couleur peux être :
- Un nom de couleur : background-color: red;
- Une couleur RGB où rouge, vert et bleu sont les couleurs primaires en synthèse additive
et prennent chacune une valeur entre 0 et 255:
- Notation hexadécimale : background-color: #0000FF;
- Notation décimale : background-color: rgb(0,255,0);
- Notation en pourcentage : background-color: rgb(50%,80%,20%);
- La valeur transparent
Remarque :
white = rgb(255,255,255) = rgb(100%,100%,100%) = #FFF = #FFFFFF
| Valeurs possibles |
couleur-rgb, couleur-hex, couleur-nom, transparent, inherit |
| Valeur héritée |
non |
| Valeur par défaut |
- |
| Compatibilité navigateurs |
Voir www.quirksmode.org |
En savoir plus :
|
|
|
background-image : URL de l'image de fond d'un élément
|
|
L'URL de l'image peut-être absolue ou relative.
background-image: url('images/css-logo.png');
background-image: url('http://www.w3.org/Icons/WWW/w3c_home_nb');
background-image: none;
Par défaut l'image est répétée de la gauche vers la droite (axe des "x") et du haut vers
le bas (axe des "y") de sorte à couvrir toute la surface de l'élément concerné.
| Valeurs possibles |
url('URL'), none, inherit |
| Valeur héritée |
non |
| Valeur par défaut |
- |
| Compatibilité navigateurs |
Voir www.quirksmode.org |
|
|
|
background-repeat : répéter ou non l'image de fond
|
|
Par défaut l'image est répétée de la gauche vers la droite (axe des "x" ou axe horizontal) et du haut vers
le bas (axe des "y" ou axe vertical), couvrant ainsi toute la surface de l'élément concerné.
L'image peut être répétée uniquement sur l'axe des "x" ou des "y", ou pas répétée du tout.
Exemles :
background-image: url('images/css-logo.png');
background-repeat:repeat;
background-image: url('images/css-logo.png');
background-repeat:repeat-x;
background-image: url('images/css-logo.png');
background-repeat:repeat-y;
background-image: url('images/css-logo.png');
background-repeat:no-repeat;
| Valeurs possibles |
repeat, repeat-x, repeat-y, no-repeat, inherit |
| Valeur héritée |
non |
| Valeur par défaut |
repeat |
| Compatibilité navigateurs |
Voir www.quirksmode.org |
|
|
|
background-position : position de l'image de fond d'un élément
|
|
Par défaut l'image de fond est affichée dans le coin haut-gauche de l'élément.
La propriété background-position permet de préciser où commence l'affichage de l'image par :
- Une paire de mots clés : left/center/right top/center/bottom
background-image: url('images/css-logo.png');
background-repeat: no-repeat;
background-position: center center;
background-image: url('images/css-logo.png');
background-repeat: no-repeat;
background-position: right top;
- Une position x,y en pourcentage : x% y%
background-image: url('images/css-logo.png');
background-repeat: no-repeat;
background-position: 70% 20%;
background-image: url('images/css-logo.png');
background-repeat: no-repeat;
background-position: 100% 0%;
- Une position x,y en unité (px, em, ...) : xpos ypos
background-image: url('images/css-logo.png');
background-repeat: no-repeat;
background-position: 50px 150px;
Remarques : il est possible de mixer pourcentages et positions, et si une seule valeur est renseignée
alors l'autre valeur sera automatiquement 50%.
| Valeurs possibles |
left/center/right top/center/bottom
x% y%
xpos ypos
inherit |
| Valeur héritée |
non |
| Valeur par défaut |
- |
| Compatibilité navigateurs |
Voir www.quirksmode.org |
|
|
|
background-attachment : détermine si l'image de fond est fixe ou bouge lorsque l'on fait défiler la page
|
|
Voir exemple dans la partie "Place à la pratique".
| Valeurs possibles |
scroll, fixed, inherit |
| Valeur héritée |
non |
| Valeur par défaut |
scroll |
| Compatibilité navigateurs |
Voir www.quirksmode.org |
|
|
|
background : combiner toutes les propriétés
|
|
La propriété background permet de rassembler en une seule instruction CSS
toutes les propriétés vues précédemment dans l'ordre suivant :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Exemples :
background: yellow url('images/css-logo.png') no-repeat center center;
background: #000000 url('images/css-logo.png') repeat-x 0% 80%;
background: blue url('images/css-logo.png') repeat-y right;
|
|
Place à la pratique :
THIS CONTENT WILL BE REPLACED BY INTERPRETED HTML TAPED IN THE "code" TEXTAREA
