/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
/image%2F0648805%2F20241206%2Fob_edeafc_100659.jpg)
pourquoipas732
Je n'utilise pas ce principe mais il peut intéresser certain(e)s blogueurs/ses: mettre en fond de boîte plusieurs images.
Voyons un exemple:
<div id="contenu">
<h1>Les quatre coins</h1>
<p id="article">[bla bla]</p>
</div>
<style><!--
#contenu{text-align:center; width:1000px; height:600px; border:1px solid black; margin:10px auto;
background:url(https://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat left top,
url(https://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat right top,
url(https://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat left bottom,
url(https://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat right bottom, url('https://ekladata.com/eswebBo_j8eZORYlOPJZ7DjNWuA/laybkgnd.jpg');}
#article{text-align:center; width:700px; height:500px; border:1px solid black; margin:20px 0 0 150px; background:rgba(255,255,255,0.2);}
--></style>
Chaque image est positionnée et l'image ou la couleur de fond est à écrire en dernier.
Pas grand chose à ajouter car les dispositions sont multiples et au goût de chacun(e).
On peut ajouter d'autres images en les positionnant où on les souhaite.
Peut-être un petit complément sur le positionnement des images; vous voyez, dans le code de la première image:
background:url(https://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat left top,
no-repeat: signifie que l'image ne doit pas être répétée.
Left: signifie qu'elle doit être placée contre le bord gauche du montage: positionnement horizontal.
top: signifie qu'elle doit être placée en haut du montage: positionnement vertical.
Des valeurs différentes permettent des positionnements plus fins.
<div id="pos">
<p id="p1">...</p>
</div>
<style><!--
#pos{text-align:center; width:1000px; height:600px; border:1px solid black; margin:10px auto;
background:url(https://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat 20% 40%, url('https://ekladata.com/eswebBo_j8eZORYlOPJZ7DjNWuA/laybkgnd.jpg');}
#p1{width:600px; height:300px; border:1px solid black; text-align:center; font-size:14pt; margin:100px 0 0 300px;}
--></style>
Le premier 20% représente 20% de la largeur du montage (1000px) par rapport au bord gauche du montage.
Le second 40% représente 40% de la hauteur du montage(600px) par rapport au bord haut du montage.
Vous pouvez ainsi positionner précisément chacune de vos différentes images de fond.
