Les arrière-plans CSS : couleurs, dégradés et images en calques

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  ».

.hero {
  /* image | position / size | repeat | colour */
  background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}

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.

.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;
}

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 et le dégradé maillé CSS.

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.

.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;
}

Le voile en dégradé propose d’autres recettes de voiles, et le texte sur une 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.

.card {
  background:
    url("grain.png") 0 0 / 200px 200px repeat,
    linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}

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 pour le modèle complet.

Les erreurs à éviter

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.

<link rel="preload" as="image" href="/hero-1920.avif" type="image/avif" fetchpriority="high">

<style>
  .hero {
    background: image-set(
      url("/hero-1920.avif") type("image/avif"),
      url("/hero-1920.webp") type("image/webp"),
      url("/hero-1920.jpg") type("image/jpeg")
    ) center / cover no-repeat #0f172a;
  }
</style>

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 et WebP, PNG ou JPG 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.