• Fonds multiples

    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:

    Les quatre coins


    <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(http://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat left top,
    url(http://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat right top,
    url(http://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat left bottom,
    url(http://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat right bottom, url('http://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(http://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(http://ekladata.com/23bKs7LaTjJysaA3qgubPERYavQ.gif) no-repeat 20% 40%, url('http://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.