|
• |
Les propriétés d'arrière plan : background |
• |
|
Les propriétés CSS de type background permettent de modifier l'arrière plan (le fond) d'un élément : changer sa couleur, mettre une image de fond, répéter un motif...
Nous allons modifier dans les différents exemples l'élément HTML suivant :
HTML
|
|
|
|
<div class="block"></div> |
|
|
|
|
CSS
|
|
|
|
div.block
{
width: 120px;
height: 120px;
border: 2px solid;
}
|
|
|
|
|
|
|
background-color
Cette propriété permet de modifier la couleur de fond d'un élément. Elle prend pour valeur un code hexadécimal ou un nom de couleur (voir la liste des couleurs normalisées SVG 1.0)
|
|
|
|
div.block
{
background-color: Gold
}
|
|
|
|
|
=
|
|
|
|
div.block
{
background-color: #FFD700
}
|
|
|
|
|
|
|
background-image
Cette propriété permet de mettre en arrière plan une image de fond. Elle prend pour valeur l'url de l'image.
|
|
|
|
div.block
{
background-image: url("image.png");
}
|
|
|
|
|
|
|
background-repeat
Cette propriété permet de gérer la répétition horizontale et verticale d'une image de fond. Vous trouverez la liste des valeurs possibles dans la liste suivante :
| Valeur | Description |
|---|
| no-repeat | aucune répétition |
| repeat-x | répétition horizontale |
| repeat-y | répétition verticale |
| repeat | répétition horizontale et verticale |
|
|
|
|
div.block
{
background-image: url("motif.png");
background-repeat: no-repeat;
}
|
|
|
|
|
|
|
|
|
|
|
div.block
{
background-image: url("motif.png");
background-repeat: repeat-x;
}
|
|
|
|
|
|
|
|
|
|
|
div.block
{
background-image: url("motif.png");
background-repeat: repeat-y;
}
|
|
|
|
|
|
|
|
|
|
|
div.block
{
background-image: url("motif.png");
background-repeat: repeat;
}
|
|
|
|
|
|
|
background-position
Cette propriété permet de gérer la position de l'image de fond dans le block. Vous trouverez la liste des valeurs possibles dans la liste suivante :
| Valeur | Description |
|---|
| numérique | en pixels (20px 10px) ou en % (50% 20%).
la première valeurs correspond à l'axe des X, la seconde à l'axe des Y. |
| top | en haut |
| bottom | en bas |
| left | à gauche |
| right | à droite |
| center | au centre |
Vous pouvez combiner jusque deux valeurs non numérique : top left (en haut à gauche), right bottom (en bas à droite)...
|
|
|
|
div.block
{
background-image: url("motif.png");
background-repeat: no-repeat;
background-position: center;
}
|
|
|
|
|
|
|
|
|
|
|
div.block
{
background-image: url("motif.png");
background-repeat: no-repeat;
background-position: 20px 50px;
}
|
|
|
|
|
|
|
background-attachment
Cette propriété permet de gérer la position de l'image de fond lorsque l'on fait défiler la page : on choisit de laisser le fond fixe ou non. Vous trouverez la liste des valeurs possibles dans la liste suivante :
| Valeur | Description |
|---|
| scroll | le fond suit le mouvement de scroll de la page |
| fixed | le fond reste fixe |
| local | le fond suit le mouvement de scroll de son contenu |
|
|
|
|
div.block
{
background-image: url("motif.png");
background-repeat: repeat;
background-position: fixed;
}
|
|
|
|
|
|
|
background
Cette propriété permet de définir en une seule ligne le background, en alignant les valeurs des propriétés dont on a besoin l'une derrière l'autre dans l'odre suivant :
background : background-color background-image background-repeat background-attachement background-position;
|
|
|
|
div.block
{
background: gold url('motif.png') repeat-x fixed 0% 85%;
}
|
|
|
|
|
=
|
|
|
|
div.block
{
background-color: gold;
background-image: url('motif.png');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 0% 75;
}
|
|
|
|
|
|
|
