Définir des arrière-plans

Voici plusieurs façons de définir des arrière-plans sur slidde.co. Les arrière-plans CSS peuvent être définis sur n'importe quel élément dans slidde.co

Arrière-plan CSS

C'est le cas d'utilisation le plus courant.

Une couleur de secours lorsque votre image d'arrière-plan est en cours de chargement ou qu'une partie de votre image d'arrière-plan est transparente :

backgroundColor: #000

L'URL de l'image peut être téléchargée en utilisant slidde.co. Vous pouvez également utiliser des dégradés CSS ici, et slidde.co propose certains préréglages de dégradés de manière sans code :

backgroundImage: url("your_image_url")

Vous pouvez utiliser "cover" la plupart du temps pour vous assurer que votre arrière-plan couvre toutes les images :

backgroundSize: cover

Si backgroundSize: "cover" cache une partie importante de votre image, vous pouvez ajuster leurs positions :

backgroundPosition: 50% 10px

Si votre image d'arrière-plan n'est pas un motif répétable, vous pouvez définir cela sur no-repeat :

backgroundRepeat: no-repeat

Contrôle si l'image d'arrière-plan se déplace lorsque vous faites défiler une page. Habituellement, vous auriez besoin d'une photo statique qui ne suit pas le défilement car elle couvre la page :

backgroundAttachment: fixed

Vous pouvez consulter les docs MDN pour des informations plus détaillées

Animer les arrière-plans

Si vous utilisez backgroundImage CSS, vous pouvez facilement animer sa backgroundPosition. Voici un exemple.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

Vous pouvez également animer d'autres propriétés CSS.

Cependant, si vous devez animer des éléments comme l'opacity CSS, vous ne pouvez pas l'animer directement. Puisque opacity s'applique à l'ensemble de l'élément. Vous devriez utiliser imageElement dans Fond avancé à la place, et définir target sur &>*:first-child pour l'appliquer uniquement à l'élément image.

Arrière-plans avancés

Cela s'applique à Page Slide Container. Vous pouvez cliquer sur Fond avancé et sélectionner les options suivantes.

Arrière-plans d'éléments d'image - Définir des filtres sur l'image de fond

Cliquez sur Fond avancé et sélectionnez imageElement. Cela créera un élément HTML <div><img /></div> séparé à l'intérieur du conteneur en tant que premier élément.

Vous pouvez ensuite appliquer des propriétés CSS comme le filtre. Par exemple, voici 3 façons de créer plus de contraste entre l'image de fond et le texte au premier plan pour améliorer la lisibilité.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Consultez la documentation MDN pour une introduction plus approfondie.

Arrière-plans animés

Cliquez sur Fond avancé et sélectionnez animated.

Il existe divers préréglages d'arrière-plans animés parmi lesquels vous pouvez choisir.

Habituellement, vous pouvez configurer le backgroundColor backgroundImage de l'arrière-plan animé. Certains préréglages ont également des variables CSS qui vous permettent de configurer la couleur, l'espacement ou la durée de l'animation.

Arrière-plans à motifs répétitifs

Cliquez sur Fond avancé et sélectionnez pattern.

1. Sélectionnez un type de motif
2. Ensuite, vous pouvez personnaliser les options du motif. Et vous pouvez essayer de cliquer sur le bouton Inspire me pour voir quel motif aléatoire il vous propose.

Cela créera un élément HTML <div><svg width="100%" height="100%" .../></div> séparé à l'intérieur. Cela signifie que vous pouvez également ajuster ses propriétés CSS, comme opacity, filter, ou même backgroundImage pour ajouter un arrière-plan en dégradé à l'élément parent svg. Et vous pouvez également animer le SVG.

Arrière-plans vidéo YouTube

Cliquez sur Fond avancé et sélectionnez youtubeElement. Cela créera un élément HTML <div><iframe /></div> séparé à l'intérieur pour intégrer une vidéo YouTube. Vous pouvez y coller votre lien URL YouTube.

Actuellement, seuls les éléments YouTube sont autorisés. Puisqu'il offre une meilleure optimisation de streaming que l'hébergement de notre propre vidéo. Si vous avez besoin de télécharger une vidéo personnalisée, veuillez nous le faire savoir via le bouton de retour d'information dans la barre de navigation.