Fond

En fond de nos montages, nous pouvons mettre:

- une couleur unie,

- une couleur en dégradé,

- une image fixe,

- une image animée,

- une courte vidéo...

mais aussi un mélange de deux de ces possibilités.

J'ai placé un dégradé et une image en filigrane et je trouve ça agréable et non fatiguant pour la vue: exemple:

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: linear-gradient(to top, #f0b7a1 0%,#8c3310 100%,#752201 100%,#bf6e4e 100%,#752201 100%);">

<p style="position: absolute; z-index: 1; width: 60vw; height: 33.75vw; background: url('https://ekladata.com/_-aUBjsefBIIbxANWU-r1tuJQVA.jpg'); background-size: cover; opacity: 0.2; filter: grayscale(1); -webkit-filter: grayscale(1);">&nbsp;</p>

<p style="position: absolute; z-index: 2; width: 10vw; height: 10vw; border: 0.4vh solid white; box-shadow: 0.4vh 0.4vh 0.6vh black; border-radius: 50%; text-align: center; line-height: 10vw; font-size: 1vw; background: rgba(100,100,50,1); transform: translate(5vw,5vw);">Image 1</p>

</div>Le dégradé linéaire est marron sur le cadre  et l'image est en noir et blanc par le filtre est par dessus; vous pouvez ajouter les vignettes animées selon votre choix.

<div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge white; margin: 1vh auto; background: radial-gradient(ellipse at center, rgba(255,50,100,1) 0%, rgba(0,100,100,0.3) 100%);">

<p style="position: absolute; z-index: 1; width: 60vw; height: 33.75vw; background: url('https://ekladata.com/zj4J2ygFK3wIbD-ZSj1X7w6YQ0s.jpg'); background-size: cover; opacity: 0.4; filter: grayscale(0.5); -webkit-filter: grayscale(0.5);">&nbsp;</p>

<p style="position: absolute; z-index: 2; width: 10vw; height: 10vw; border: 0.4vh solid white; box-shadow: 0.4vh 0.4vh 0.6vh black; border-radius: 50%; text-align: center; line-height: 10vw; font-size: 1vw; background: rgba(100,100,50,1); transform: translate(5vw,5vw);">Image 1</p>

</div>

Il est plus simple d'utiliser des couleurs en rgba, qui ont un réglage d'opacité intégré.

Ce ne sont que 2 exemples de principe; à vous de créer votre modèle.