Les propriétés d’arrière-plan CSS sont utilisées pour définir les effets d’arrière-plan des éléments.
Dans ces chapitres, vous découvrirez les propriétés d’arrière-plan CSS suivantes:
- Couleur de l’arrière plan
- image de fond
- Répétition du fond
- fond-attachement
- position de fond
Couleur de fond CSS
La background-colorpropriété spécifie la couleur d’arrière-plan d’un élément.
Exemple
La couleur d’arrière-plan d’une page est définie comme suit:
body {
background-color: lightblue;
}
Avec CSS, une couleur est le plus souvent spécifiée par:
- un nom de couleur valide – comme « rouge »
- une valeur HEX – comme « # ff0000 »
- une valeur RVB – comme « rgb (255,0,0) »
Autres éléments
Vous pouvez définir la couleur d’arrière-plan pour tous les éléments HTML:
Exemple
Ici, les éléments <h1>, <p> et <div> auront différentes couleurs d’arrière-plan:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Opacité / Transparence
La opacitypropriété spécifie l’opacité / la transparence d’un élément. Il peut prendre une valeur de 0,0 à 1,0.
Exemple
div {
opacity: 0.3;
}
Remarque: Lorsque vous utilisez la opacitypropriété pour ajouter de la transparence à l’arrière-plan d’un élément, tous ses éléments enfants héritent de la même transparence. Cela peut rendre le texte à l’intérieur d’un élément entièrement transparent difficile à lire.
Transparence avec RGBA
Si vous ne souhaitez pas appliquer d’opacité aux éléments enfants, comme dans notre exemple ci-dessus, utilisez des valeurs de couleur RGBA .
Exemple
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}
Image d’arrière-plan CSS
La background-imagepropriété spécifie une image à utiliser comme arrière-plan d’un élément.
Par défaut, l’image est répétée pour couvrir tout l’élément.
Exemple
L’image d’arrière-plan d’une page peut être définie comme suit:
body {
background-image: url(« paper.gif »);
}
Exemple
Cet exemple montre une mauvaise combinaison de texte et d’image d’arrière-plan. Le texte est difficilement lisible:
body {
background-image: url(« bgdesert.jpg »);
}
Remarque: lorsque vous utilisez une image d’arrière-plan, utilisez une image qui ne perturbe pas le texte.
Répétition d’arrière-plan CSS
Par défaut, la background-imagepropriété répète une image à la fois horizontalement et verticalement.
Certaines images doivent être répétées uniquement horizontalement ou verticalement, ou elles auront l’air étranges, comme ceci:
Exemple
body {
background-image: url(« gradient_bg.png »);
}
Si l’image ci-dessus est répétée uniquement horizontalement ( background-repeat: repeat-x;), l’arrière-plan sera meilleur:
Exemple
body {
background-image: url(« gradient_bg.png »);
background-repeat: repeat-x;
}
Conseil: pour répéter une image verticalement, définissezbackground-repeat: repeat-y;
CSS background-repeat: pas de répétition
L’affichage de l’image d’arrière-plan une seule fois est également spécifié par la background-repeatpropriété:
Exemple
Afficher l’image d’arrière-plan une seule fois:
body {
background-image: url(« img_tree.png »);
background-repeat: no-repeat;
}
Dans l’exemple ci-dessus, l’image d’arrière-plan est placée au même endroit que le texte. Nous voulons changer la position de l’image, afin qu’elle ne perturbe pas trop le texte.
Position d’arrière-plan CSS
La background-positionpropriété est utilisée pour spécifier la position de l’image d’arrière-plan.
Exemple
Positionnez l’image d’arrière-plan dans le coin supérieur droit:
body {
background-image: url(« img_tree.png »);
background-repeat: no-repeat;
background-position: right top;
}
Fond d’écran CSS
La background-attachmentpropriété spécifie si l’image d’arrière-plan doit défiler ou être fixée (ne défilera pas avec le reste de la page):
Exemple
Spécifiez que l’image d’arrière-plan doit être fixe:
body {
background-image: url(« img_tree.png »);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Exemple
Spécifiez que l’image d’arrière-plan doit défiler avec le reste de la page:
body {
background-image: url(« img_tree.png »);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
Arrière-plan CSS – propriété de raccourci
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é. C’est ce qu’on appelle une propriété abrégée.
Au lieu d’écrire:
body {
background: #ffffff;
background-image: url(« img_tree.png »);
background-repeat: no-repeat;
background-position: right top;
}
Vous pouvez utiliser la propriété raccourcie background:
Exemple
Utilisez la propriété raccourcie pour définir les propriétés d’arrière-plan dans une déclaration:
body {
background: #ffffff url(« img_tree.png ») no-repeat right top;
}
Lorsque vous utilisez la propriété raccourcie, l’ordre des valeurs de propriété est le suivant:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Peu importe si l’une des valeurs de propriété est manquante, tant que les autres sont dans cet ordre. Notez que nous n’utilisons pas la propriété background-attachment dans les exemples ci-dessus, car elle n’a pas de valeur.