# Les arrière-plans CSS : couleurs, dégradés et images en calques
[Canonical HTML page](https://gradiently.design/fr/guide/css-background-image)
Une seule propriété peut contenir une photo, un voile teinté par-dessus, une lumière douce dans un coin et une couleur de repli en dessous. Une fois l’ordre des calques compris, la plupart des effets de fond tiennent en une ligne.
## The short version
- La propriété CSS background peut contenir plusieurs calques séparés par des virgules, et le premier calque listé est peint au-dessus.
- Une couleur d’arrière-plan ne peut être définie qu’une fois, dans le dernier calque, et elle apparaît sous toutes les images et tous les dégradés.
- Dans le raccourci background, background-size doit suivre background-position après une barre oblique, comme dans center / cover.
- Placer un calque de dégradé au-dessus d’un calque d’image dans une même déclaration est le moyen le plus simple de teinter une photo pour rendre le texte lisible.
- Les images définies en CSS sont découvertes plus tard que les éléments img : une image d’en-tête importante peut nécessiter une indication de préchargement.
Un **arrière-plan CSS** est une pile de calques sur un seul élément. La propriété `background` accepte une liste d’images et de dégradés séparés par des virgules, peints avec le premier au-dessus, plus une seule couleur tout en bas. C’est tout ce qu’il faut pour une photo d’en-tête teintée, une lumière douce sur un dégradé ou une texture sur une couleur de marque, sans éléments ni conteneurs supplémentaires. Le reste consiste à savoir comment le raccourci lit ses valeurs.
## Le raccourci background, valeur par valeur
Le raccourci définit jusqu’à huit propriétés détaillées à la fois. Celles que vous omettez reprennent leur valeur par défaut, ce qui est la source la plus fréquente des bugs du type « pourquoi ma taille d’arrière-plan a disparu ».
| Propriété détaillée | Ce qu’elle contrôle | Valeurs courantes |
| --- | --- | --- |
| `background-color` | La couleur sous tous les calques | `#0f0b1e`, `oklch(20% 0.05 290)` |
| `background-image` | Images et dégradés, séparés par des virgules | `url(photo.webp)`, `linear-gradient(…)` |
| `background-position` | L’emplacement de chaque calque | `center`, `top right`, `50% 30%` |
| `background-size` | La taille de chaque calque | `cover`, `contain`, `200px auto` |
| `background-repeat` | S’il se répète en mosaïque | `no-repeat`, `repeat`, `repeat-x` |
| `background-attachment` | Défile avec l’élément ou avec la fenêtre | `scroll`, `fixed`, `local` |
| `background-origin` et `background-clip` | La boîte d’où il part et celle qui le découpe | `padding-box`, `border-box`, `text` |
Référence complète sur [la page background de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
```css
.hero {
/* image | position / size | repeat | colour */
background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}
```
La barre oblique est obligatoire : la taille ne peut venir que juste après la position. La couleur vient en dernier et s’affiche pendant le chargement de l’image.
## Comment s’empilent les calques d’arrière-plan
Listez les calques de haut en bas, séparés par des virgules. Chaque calque peut avoir sa propre position, sa taille et sa répétition, données dans le même ordre dans chaque propriété détaillée. Seul le dernier calque peut inclure une couleur. Imaginez une pile de papiers calques que l’on lit de haut en bas.
- Calque 1 : lumière rose: `radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%)`
- Calque 2 : lumière bleue: `radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%)`
- Calque 3 : fond indigo: `linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)`
Trois calques présentés seuls. Les deux premiers se fondent vers la transparence, si bien que le fond apparaît partout où ils ne peignent pas.
```css
.section {
background:
radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%),
radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%),
linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)
#0f0b1e;
}
```
Les trois mêmes calques empilés dans une seule déclaration, le premier au-dessus, avec une couleur unie de repli tout en bas.
Utilisez `transparent` dans les arrêts extérieurs pour que les lumières se fondent dans ce qui se trouve dessous. Pour les formes elles-mêmes, voyez [le dégradé radial CSS](https://gradiently.design/fr/guide/css-radial-gradient) et [le dégradé maillé CSS](https://gradiently.design/fr/guide/css-mesh-gradient).
## Un dégradé par-dessus une image d’arrière-plan
L’arrière-plan en calques le plus utile teinte une photo pour que les mots posés dessus se lisent. Placez un calque de dégradé en premier et l’image en second. Un dégradé sombre là où se trouve le texte et transparent ailleurs préserve bien plus la photo qu’un voile sombre uniforme.
```css
.hero {
background:
linear-gradient(90deg, rgb(10 12 24 / 0.85) 0%, rgb(10 12 24 / 0.4) 45%, transparent 70%),
url("terrace.webp") center / cover no-repeat
#0a0c18;
color: #f8fafc;
}
```
Sombre à gauche, où se trouve le titre, transparent à droite, où la photo doit se voir.
Un large en-tête de site web avec un titre sur un fond assombri uniformément
Un voile uniforme rend le texte lisible en assombrissant tout de la même façon.
Le même en-tête où seul le côté derrière le titre est plus calme et plus sombre
Un calque orienté n’assombrit que là où sont les mots et laisse le reste de la scène lumineux.
[Le voile en dégradé](https://gradiently.design/fr/guide/gradient-overlay) propose d’autres recettes de voiles, et [le texte sur une image](https://gradiently.design/fr/guide/text-over-image) explique quand déplacer les mots plutôt que d’assombrir l’image.
## background-size, position et répétition
- `cover` remplit la boîte et recadre ce qui dépasse. Idéal pour les photos et les en-têtes à fond perdu.
- `contain` fait tenir toute l’image à l’intérieur et laisse des vides. Idéal pour les logos et illustrations qui ne doivent pas être recadrés.
- Associez `cover` à une `background-position` choisie, comme `50% 30%`, pour que le recadrage garde le visage du sujet ou le produit en vue.
- Les tuiles de texture demandent `repeat` et une taille fixe, par exemple `200px 200px`, pour que le grain reste identique à toutes les largeurs d’écran.
- `background-attachment: fixed` crée un effet de parallaxe sur ordinateur, mais beaucoup de navigateurs mobiles l’ignorent : n’en dépendez jamais.
```css
.card {
background:
url("grain.png") 0 0 / 200px 200px repeat,
linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}
```
Une petite tuile de grain répétée sur un dégradé chaud. Les réglages de chaque calque suivent son image : la taille de la tuile ne touche pas le dégradé.
Une autre propriété détaillée mérite sa place : `background-clip: text` découpe l’arrière-plan à la forme des lettres, et c’est ainsi qu’on crée un texte en dégradé en CSS. Réservez-la aux grands mots d’affichage, définissez une `color` unie de repli, et voyez [le texte en dégradé CSS](https://gradiently.design/fr/guide/css-gradient-text) pour le modèle complet.
## Les erreurs à éviter
### À éviter
- Définir `background-size` puis le raccourci après, ce qui la réinitialise
- Une couleur dans un autre calque que le dernier
- Aucune couleur de repli, donc un texte illisible pendant le chargement de l’image
- Une photo énorme pour une boîte de 400 pixels de large
- Un contenu important uniquement dans une image d’arrière-plan, invisible pour les lecteurs d’écran
### À faire
- Écrire d’abord le raccourci, puis les éventuelles surcharges détaillées
- Une seule couleur, en fin de liste
- Une couleur de repli proche du ton moyen de l’image
- Des images dimensionnées à la boîte, servies en WebP ou AVIF
- Les images porteuses de sens en `img` avec texte alternatif ; la décoration en arrière-plan
## Des images d’arrière-plan adaptatives et rapides
`image-set()` laisse le navigateur choisir entre formats ou résolutions, un peu comme `srcset` sur un `img`. Et comme les images d’arrière-plan ne sont découvertes qu’une fois le CSS analysé, un fond d’en-tête peut arriver tard ; une indication de préchargement dans le `head` règle ce problème.
```html
```
Le navigateur prend le premier format qu’il prend en charge. Le préchargement garantit que l’image principale commence à se télécharger tôt.
Souvent, l’arrière-plan le plus rapide n’est pas une image du tout. Les dégradés en calques ne coûtent aucun téléchargement, et une minuscule tuile de grain ajoute de la texture pour quelques kilo-octets. [Les performances des dégradés CSS](https://gradiently.design/fr/guide/css-gradient-performance) et [WebP, PNG ou JPG](https://gradiently.design/fr/guide/webp-images) détaillent les compromis. Si vous préférez ne pas régler lumière et grain à la main, un Mark Gradiently vous donne un fond abouti et singulier au format d’en-tête de site 1920×1080, avec le même style que vos publications sociales.
## FAQ
### Comment ajouter une image d’arrière-plan en CSS ?
Utilisez `background: url("image.webp") center / cover no-repeat;` sur l’élément, avec une couleur de repli à la fin au cas où l’image tarderait à charger.
### Comment mettre un dégradé par-dessus une image d’arrière-plan ?
Listez le dégradé en premier et l’image en second dans une même déclaration `background`, séparés par une virgule. Le premier calque est peint au-dessus.
### Peut-on utiliser plusieurs arrière-plans en CSS ?
Oui. Séparez les calques par des virgules ; chacun peut avoir sa position, sa taille et sa répétition, et seul le dernier calque peut inclure une couleur.
### Quelle différence entre background-size cover et contain ?
`cover` remplit tout l’élément et recadre ce qui dépasse ; `contain` montre l’image entière et peut laisser de l’espace vide autour.
### Pourquoi mon background-size ne fonctionne-t-il plus ?
Le raccourci `background` réinitialise toutes les propriétés détaillées qu’il ne mentionne pas. Définissez `background-size` après le raccourci, ou incluez-la dans le raccourci après la position, avec une barre oblique.