Styles d'arrière-plan - Aide Webflow

Last updated on 10/8/2025@mrbirddev
Styles d'arrière-plan - Aide Webflow

Un aperçu des styles d'arrière-plan que vous pouvez définir sur un élément : couleur, images, dégradés, superpositions de couleur et vidéos.

AVERTISSEMENT DE CONTENU — cette section peut affecter les personnes sensibles visuellement. La discrétion du spectateur est conseillée.

Couleur d'arrière-plan

Vous pouvez définir une couleur d'arrière-plan sur n'importe quel élément sauf pour les images et les vidéos (bien que vous puissiez utiliser des images et des vidéos comme arrière-plans). Ajoutez une couleur d'arrière-plan en entrant une valeur de couleur (par exemple, hex, rgba ou nom de couleur) ou en utilisant le sélecteur de couleur. Vous pouvez également ajouter une couleur d'arrière-plan aux éléments de texte ou à un contenu textuel spécifique à l'intérieur d'un élément de texte.

Si vous souhaitez que les couleurs d'arrière-plan soient cohérentes sur l'ensemble de votre site, utilisez la balise Body (Toutes les pages) pour l'héritage. Stylisez-la en sélectionnant l'élément Body et en choisissant la balise dans le panneau de style ou en utilisant le menu d'héritage. Toute modification apportée au Body (Toutes les pages) sera par défaut appliquée aux nouveaux éléments.

La plupart des éléments ont un arrière-plan transparent par défaut. Certains éléments, comme le composant Slider, ont une couleur par défaut que vous pouvez remplacer.

Image d'arrière-plan

Webflow offre de nombreuses options pour personnaliser votre image d'arrière-plan.

Pour ajouter ou modifier l'image d'arrière-plan :

  • Faites défiler jusqu'à Arrière-plans dans le panneau de style
  • Cliquez sur Choisir une image depuis le panneau des ressources
  • Cochez la case pour @2x pour des images plus nettes sur les appareils HiDPI

Pour définir une vidéo d'arrière-plan, utilisez le composant vidéo d'arrière-plan dans le panneau Ajouter.

Taille de l'image d'arrière-plan

  • Personnalisé : Définissez des valeurs de largeur/hauteur ou de pourcentage. Agrandissez avec des valeurs supérieures à 100 %.
  • Couvrir : Remplit et couvre l'arrière-plan, pouvant éventuellement rogner l'image.
  • Contenir : Garde l'image contenue à l'intérieur de l'élément.

Position de l'image de fond

Par défaut, en haut à gauche. Vous pouvez ajuster manuellement les positions (px, %, VW, VH).

Carrelage

Les images de fond se répètent verticalement et horizontalement par défaut. Contrôlez la répétition horizontalement, verticalement ou pas du tout.

Fixe ou défilement

Choisissez Non fixe (l'image défile) ou Fixe (l'image reste en place). Les images Fixes sont contenues par la fenêtre d'affichage.

Dégradés

Les dégradés peuvent être utilisés seuls ou superposés sur une couleur/image de fond. Deux types :

  • Dégradés linéaires
  • Dégradés radiaux

Les deux ont des arrêts (points) où les couleurs s'estompent.

Safari traite les dégradés vers la transparence comme du "noir transparent", donc la transparence apparaîtra noire dans Safari.

Dégradé linéaire

Définissez la direction par angle via le cadran, les flèches (incréments de 45 degrés) ou la saisie de champ.

Arrêts de dégradé

Modifiez la couleur/l'opacité aux arrêts. Superposer sur une image rend l'image visible à une opacité plus faible. Ajoutez des arrêts en cliquant. Supprimez en faisant glisser.

Répéter

Bascules pour répéter le dégradé.

Inverser

Icône pour inverser les positions des arrêts.

Dégradé radial

Crée un dégradé circulaire. L'arrêt de gauche est la couleur au centre.

Position

Choisissez le point focal via des points ou manuellement avec des valeurs/unités.

Taille

Contrôles prédéfinis :

  • Côté le plus proche : centre au côté le plus proche
  • Coin le plus proche : centre au coin le plus proche
  • Côté le plus éloigné : centre au côté le plus éloigné
  • Coin le plus éloigné : (par défaut)

Superposition de couleur

Ajoutez une superposition de couleur aux fonds avec le sélecteur de couleur et l'opacité.

Superposition d'images et de dégradés

Empilez plusieurs images de fond, dégradés et superpositions pour un effet. Réorganisez en faisant glisser, basculez la visibilité avec l'icône œil, supprimez avec la corbeille.

Vidéo de fond

Les vidéos de fond sont des vidéos silencieuses et en boucle pour les fonds afin d'ajouter une touche cinématographique. Soyez conscient :

Les vidéos en lecture automatique et en boucle peuvent être distrayantes ou gênantes pour les personnes ayant des problèmes cognitifs/vestibulaires. Fournissez toujours des contrôles pour mettre en pause.
Webflow fournit par défaut un bouton lecture/pause pour l'accessibilité. Les vidéos ne se lanceront pas automatiquement pour les utilisateurs avec les paramètres "Préférer réduire les animations".

Ajoutez avec Recherche rapide (CMD/CTRL+E) ou Panneau d'ajout > Composants. Téléchargez votre vidéo (<30MB; webm, mp4, mov, ogg). Les noms de fichiers doivent éviter les espaces/caractères spéciaux.

Le transcodage se produit après le téléchargement (mp4 & webm pour la compatibilité des navigateurs).

Paramètres de la vidéo

  • Boucle vidéo : se répète continuellement.
  • Lecture automatique de la vidéo : démarre au chargement de la page.
  • Inclure le bouton lecture/pause : le visiteur peut contrôler la lecture.
WCAG exige des contrôles pause/arrêt/masquer pour le contenu en mouvement qui dure plus de 5 secondes. Fournissez toujours des contrôles pour l'accessibilité.

Prévisualisation de la vidéo de fond

  • Survoler la vignette
  • Ouvrir dans un nouvel onglet
  • Icône de prévisualisation dans la barre

Remplacement de la vidéo de fond

Ouvrez les paramètres pour remplacer la vidéo, transcoder, prévisualiser, etc.

Utilisation de la vidéo de fond comme section

Déposez le contenu à l'intérieur de l'élément Vidéo de fond. Stylisez comme d'habitude dans le panneau de style.

Les vidéos de fond peuvent ne pas se lancer automatiquement sur les appareils tactiles si le mode économie de données ou basse consommation est activé.

Superposition de la vidéo de fond

Ajoutez un dégradé ou une superposition solide pour le contraste. La superposition se trouve au-dessus de la vidéo, sous le contenu.

Et voilà comment utiliser les arrière-plans dans Webflow !

Retour à l'aide de Webflow

Last updated on 10/8/2025@mrbirddev
Recent Articles
Loading...