Intégration d’images en background avec FLEXBOX
Une fois “tranchées”, exportez vos images nommées img1.jpg, img2.jpg etc dans un répertoire online : votrenomdedomaine/laboratoire/img_online/002/
<section class="s01"></section>
<section class="s02">
<div></div>
<div></div>
</section>
<section class="s03"></section>
<section class="s04"></section>
<section class="s05"></section>
<section class="s06">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="s07"></section>
<section class="s08"></section>
<section class="s09"></section>
<section class="s10"></section>
<section class="s11"></section> /* basic reset */
* {margin:0;padding:0;}
/* flexbox on sections */
section {display:flex;}
/* images bck with height and width */
.s01 {
background-image:url(votrenomdedomaine/laboratoire/img_online/002/img1.jpg);
width: largeur image en px;
height: heuteur image en px;
}
.s02 div:nth-child(1) {
background-image:url(votrenomdedomaine/laboratoire/img_online/002/img2.jpg);
width: largeur image en px;
height: heuteur image en px;
} Pas de texte. Pas de paragraphe. Seulement des images.
Deux niveaux d’intégration en fonction de vos compétences.
Niveau 1 : chaque image dans un div au pixel près.
Niveau 2 : les zones vides ont la bonne couleur mais sans image. Un conteneur contient les zones à centrer.