La background-imagepropriété en CSS applique un graphique (par exemple PNG, SVG, JPG.webp, GIF, WEBP) ou un dégradé à l'arrière-plan d'un élément.
Il existe deux types d'images que vous pouvez inclure avec CSS: les images régulières et les dégradés.
Images
Utiliser une image sur un arrière-plan est assez simple:
body ( background: url(sweettexture.jpg.webp); )La url()valeur vous permet de fournir un chemin de fichier vers n'importe quelle image, et elle s'affichera comme arrière-plan de cet élément.
Vous pouvez également définir un URI de données pour le url(). Cela ressemble à ceci:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Cette technique supprime une requête HTTP, ce qui est une bonne chose. Mais, il y a un certain nombre d'inconvénients, donc avant de commencer à remplacer toutes vos images, assurez-vous de prendre en compte tous les avantages et les inconvénients des URI de données.
Vous pouvez également utiliser background-imagepour spriter des images, ce qui est une autre méthode utile pour réduire les requêtes HTTP.
Les dégradés
Une autre option lors de l'utilisation d'arrière-plans consiste à indiquer au navigateur de créer un dégradé. Voici un exemple simple de super-duper d'un dégradé linéaire:
body ( background: linear-gradient(black, white); )Vous pouvez également utiliser des dégradés radiaux:
body ( background: radial-gradient(circle, black, white); )Techniquement parlant, les dégradés ne sont qu'une autre forme d'image d'arrière-plan. La différence est que le navigateur crée l'image pour vous. Voici comment les écrire: Syntaxe du dégradé CSS3
L'exemple ci-dessus utilise un seul dégradé, mais vous pouvez également superposer plusieurs dégradés. Il existe des modèles assez étonnants que vous pouvez créer en utilisant cette technique.
Définition d'une couleur de secours
Si une image d'arrière-plan ne se charge pas ou si votre arrière-plan dégradé est affiché sur un navigateur qui ne prend pas en charge les dégradés, le navigateur recherchera une couleur d'arrière-plan comme solution de secours. Vous pouvez spécifier votre couleur de secours comme ceci:
body ( background: url(sweettexture.jpg.webp) blue; )Plusieurs images d'arrière-plan
Vous pouvez utiliser plusieurs images ou un mélange d'images et de dégradés pour votre arrière-plan. Les images d'arrière-plan multiples sont désormais bien prises en charge (tous les navigateurs modernes et IE9 + pour les images graphiques, IE10 + pour les dégradés).
Lorsque vous utilisez plusieurs images d'arrière-plan, sachez qu'il existe un ordre d'empilement quelque peu contre-intuitif. Listez l'image qui devrait être à l'avant en premier, et l'image qui devrait être à l'arrière en dernier, comme ceci:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Lorsque vous utilisez plusieurs images d'arrière-plan, vous devrez souvent définir plus de valeurs pour l'arrière-plan pour que tout soit au bon endroit. Si vous souhaitez utiliser le backgroundraccourci, vous pouvez définir les valeurs de chaque image individuellement. Votre raccourci ressemblera à quelque chose comme ceci (notez la virgule séparant la première image et ses valeurs de la deuxième image et ses valeurs):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Il n'y a pas de limite au nombre d'images d'arrière-plan que vous pouvez définir, et vous pouvez faire des choses intéressantes comme animer vos images d'arrière-plan. Il existe un bon exemple d'images d'arrière-plan multiples avec animation sur le blog de David Walsh.
Démo
Voir l'image d'arrière-plan Pen par CSS-Tricks (@ css-tricks) sur CodePen.
En rapport
- background-attachment
- clip de fond
- Couleur de l'arrière plan
- background-origin
- position de fond
- Répétition du fond
- taille de fond
Plus de ressources
- La spécification CSS3
- MDN
- Images d'arrière-plan pleine page parfaites
- Maîtriser les dégradés CSS (Slidedeck)
Prise en charge du navigateur
Les images régulières fonctionnent partout et plusieurs images fonctionnent dans les navigateurs modernes et IE9 +. Voici le support des dégradés:
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |