Les propriétés CSS de base sont utilisés pour définir les effets de fond pour les éléments.
propriétés CSS de fond:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Couleur de fond
Le background-color propriété spécifie la couleur d'un élément de fond.
La couleur d'une page d'arrière-plan est défini comme ceci:
Avec CSS, une couleur est le plus souvent définie par:
- un nom de couleur valide - comme "red"
- une valeur HEX - comme "#ff0000"
- une valeur RGB - comme "rgb(255,0,0)"
Regardez couleur CSS valeurs pour une liste complète des valeurs de couleurs possibles.
Dans l'exemple ci - dessous, le <h1>, <p> et <div> éléments ont différentes couleurs de fond:
Exemple
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} Essayez - le vous - même » Image de fond
Le background-image propriété spécifie une image à utiliser comme arrière - plan d'un élément.
Par défaut, l'image est répétée de sorte qu'il couvre tout l'élément.
L'image de fond d'une page peut être définie comme ceci:
Voici un exemple d'une mauvaise combinaison de texte et de l'image d'arrière-plan. Le texte est à peine lisible:
 | Remarque: Lorsque vous utilisez une image de fond, utiliser une image qui ne perturbe pas le texte. |
|---|
Image de fond - Répétition horizontale ou verticale
Par défaut, le background-image propriété répète une image à la fois horizontalement et verticalement.
Certaines images doivent être répétées seulement horizontalement ou verticalement, ou ils vont paraître étrange, comme ceci:
Si l'image ci - dessus est répétée seulement horizontalement ( background-repeat: repeat-x; ), l'arrière - plan sera mieux:
Exemple
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Essayez - le vous - même » | Remarque: Pour répéter une image réglée verticalement background-repeat: repeat-y; |
|---|
Image de fond - La position et no-repeat
Afficher l'image d'arrière - plan une seule fois est également spécifié par le background-repeat bien:
Exemple
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Essayez - le vous - même » Dans l'exemple ci-dessus, l'image d'arrière-plan est affiché dans le même endroit que le texte. Nous voulons changer la position de l'image, de sorte qu'il ne perturbe pas le texte trop.
La position de l'image est spécifiée par le background-position propriété:
Exemple
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Essayez - le vous - même » Image de fond - Position fixe
Pour spécifier que l'image de fond doit être fixé (ne sera pas défiler avec le reste de la page), utiliser le background-attachment propriété:
Exemple
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Essayez - le vous - même » Contexte - propriété Shorthand
Pour raccourcir le code, il est également possible de spécifier toutes les propriétés d'arrière-plan dans une seule propriété. Ceci est appelé un raccourci.
La propriété raccourcie pour le fond est background :
Exemple
body {
background: #ffffff url("img_tree.png") no-repeat right top;
} Essayez - le vous - même » Lorsque vous utilisez la propriété raccourcie de l'ordre des valeurs de propriété est:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
Il n'a pas d'importance si l'une des valeurs de propriété est manquante, aussi longtemps que les autres sont dans cet ordre.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »
Toutes les propriétés CSS de fond
| Propriété | La description |
|---|---|
| background | Définit toutes les propriétés d'arrière-plan dans une déclaration |
| background-attachment | Définit si une image d'arrière-plan est fixe ou défile avec le reste de la page |
| background-color | Définit la couleur d'un élément de fond |
| background-image | Définit l'image de fond d'un élément |
| background-position | Définit la position de départ d'une image d'arrière-plan |
| background-repeat | Définit comment une image de fond sera répétée |