Fond dégradé et image ou texture.

Nous savons faire des cadres avec une couleur unie en fond, avec un dégradé de couleur(s) et avec une image en fond, texture ou paysage.

Quelques exemples pour vous donner le goût d'essayer...

Nous pouvons mélanger ces différentes façons pour obtenir des fonds personnalisés; commençons par un dégradé radial en fond et par dessus, une texture:

<div style="width:60vw; height:20vw; border:0.1vh double black; margin:1vh auto; background: radial-gradient(ellipse at center, #fceabb 0%,#f9b32f 50%,#fbdf93 100%);font-size:1vw; line-height:2vw; text-align:center;">
<p id="fd1">&nbsp;</p>
</div>
<style><!--
#fd1{position:absolute; z-index:1; width:60vw; height:20vw; background:url('http://ekladata.com/lqgO2Re-zBfqACO-KsHpL763Ino/satin5.jpg'); background-size:cover; opacity:0.5;}
--></style>

Essayons en inversant les positions: Résultat très similaire, avec des valeurs d'opacité adaptées.

<p style="float: left; width: 10vw; height: 10vw; border: 0.1vh solid black; background: url('http://ekladata.com/sLJYyP6eOxMOrwO9t6Lcie3NNjM/velvet1.jpg'); background-size: 10vw 10vw;">&nbsp;</p>
<p style="float: left; width: 10vw; height: 10vw; border: 0.1vh solid black; background: radial-gradient(ellipse at center, #fceabb 0%,#f9b32f 50%,#fbdf93 100%); background-size: 10vw 10vw;">&nbsp;</p>
<div style="float: left; width: 60vw; height: 20vw; border: 0.1vh double black; background: url('http://ekladata.com/sLJYyP6eOxMOrwO9t6Lcie3NNjM/velvet1.jpg'); background-size: 60vw 20vw; font-size: 1vw; line-height: 2vw; text-align: center;">
<p id="fd2">&nbsp;</p>
</div>
<style><!--
#fd2{position:absolute; z-index:1; width:60vw; height:20vw;background: radial-gradient(ellipse at center, #fceabb 0%,#f9b32f 50%,#fbdf93 100%); background-size:cover; opacity:0.8;}
--></style>

Même principe avec une image et un fond dégradé en radial.

Idem avec ce dégradé et une autre texture.

Dans ces exemples, j'ai considéré qu'une des images était en fond de cadre mais on peut les superposer hors fond du cadre, afin de pourvoir modifier l'opacité de chacune:

<p style="float: left; width: 10vw; height: 10vw; border: 0.1vh solid black; background: radial-gradient(ellipse at center, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); background-size: 10vw;">&nbsp;</p>
<p style="float: left; width: 10vw; height: 10vw; border: 0.1vh solid black; background: url('http://ekladata.com/jVrQPGnCn2Llbun_fFnGP9tKJ_4/15c35bbb.jpg'); background-size: 10vw 10vw;">&nbsp;</p>
<div style="float: left; width: 60vw; height: 33.75vw; border: 0.1vh double black;">
<p id="fd5">&nbsp;</p>
<p id="fd6">&nbsp;</p>
</div>
<style><!--
#fd5{position:absolute; z-index:1; width:60vw; height:33.75vw; background:url('http://ekladata.com/jVrQPGnCn2Llbun_fFnGP9tKJ_4/15c35bbb.jpg'); background-size:60vw 33.75vw; opacity:0.5;}
#fd6{position:absolute; z-index:1; width:60vw; height:33.75vw;background: radial-gradient(ellipse at center, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); background-size:60vw 33.75vw; opacity:0.5;}
--></style>