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.
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.
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 :
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.
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.
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 !