Exemple
Définir des propriétés d'arrière-plan dans une déclaration:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
Essayez - le vous - même » Définition et utilisation
L'arrière-plan de la propriété abrégée fixe toutes les propriétés d'arrière-plan dans une déclaration.
Les propriétés qui peuvent être définies, sont: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip et background-attachment.
Il n'a pas d' importance si l' une des valeurs ci - dessus sont manquantes, par exemple fond: ff0000 # url(smiley.gif) ; est autorisée.
| Valeur par défaut: | see individual properties |
|---|---|
| Hérité: | no |
| Animable: | yes, see individual properties . Read about animatable Try it |
| Version: | CSS1 + new properties in CSS3 |
| Syntaxe JavaScript: | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Internet Explorer 8 et les versions antérieures ne prennent pas en charge plusieurs images d'arrière - plan sur un seul élément.
Note: Voir le soutien du navigateur individuel pour chaque valeur ci - dessous.
Syntaxe CSS
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;Remarque: Si l' une des propriétés dans la déclaration abrégée est la propriété bg-size, vous devez utiliser un / (slash) pour le séparer de la propriété bg-position, par exemple background:url(smiley.gif) 10px 20px / 50px 50px ; se traduira par une image de fond, placé 10 pixels de la gauche, 20 pixels de haut, et la taille de l'image est de 50 pixels de large et 50 pixels de haut.
Remarque: Si vous utilisez plusieurs sources background-image , mais veulent aussi une couleur d'arrière - plan, le paramètre background-color doit être le dernier dans la liste.
propriété valeurs
| Valeur | La description | CSS |
|---|---|---|
| background-color | Indique la couleur de fond à utiliser | 1 |
| background-image | Spécifie une ou plusieurs images de fond à utiliser | 1 |
| background-position | Indique la position des images d'arrière-plan | 1 |
| background-size | Indique la taille des images d'arrière-plan | 3 |
| background-repeat | Indique comment répéter les images d'arrière-plan | 1 |
| background-origin | Indique la zone de positionnement des images d'arrière-plan | 3 |
| background-clip | Indique la zone de peinture des images d'arrière-plan | 3 |
| background-attachment | Indique si les images de fond sont fixés ou défile avec le reste de la page | 1 |
| initiale | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | 3 |
| hériter | Hérite cette propriété de son élément parent. Lisez à propos de hériteront | 2 |
Pages associées
Tutoriel CSS: CSS Contexte
CSS3 tutoriel: CSS3 Fond
Référence HTML DOM: background property