Insérer une photo dans une case

Bonjour,

je débute en html-css, je souhaite insérer une image dans un bloc. En effet, non sans mal j'ai crée plusieurs blocs dans ma page et je souhaite donc insérer des photos dedans avec du texte. Merci par avance pour votre aide.

Bonjour,

Montre ton code, que l'on puisse t'aider. Merci d'avance.

HTML :
<h2> Bloc 1/2 </h2>
<div class="boxdemi">
</div><div class="boxdemi"></div>

<h2>bloc 1/3 </h2>
<div class="boxtiers"></div>
<div class="boxtiers"></div>
<div class="boxtiers"></div>

<h2> bloc 3/4 + bloc 1/4</h2>
<div class="boxtroisquart"></div>
<div class="boxtroisquart"></div>
<div class="boxtroisquart"></div>
<h2> bloc 1/4</h2>
<div class="boxquart"></div>
<div class="boxquart"></div>
<div class="boxquart"></div>
<div class="boxquart"></div>
</div>
</body>
</html>
<p>
</p>

CSS :

boxdemi+.boxdemi {
margin-left: 20px;

}

.boxdemi {
display: inline-block;
padding: 15px;
height: 400px;
width: 570px;
background-color: white;
}


.boxtiers+.boxtiers{
margin-left: 20px;
}

.boxtiers {

display: inline-block;
height: 400px;
background-color: gold;
padding: 15px;
width: 370px;

}

.boxtroisquart {
height: 400px;
display: inline-block;
background-color: blue;
margin: 15px;
padding: 15px;
width: 280px;
padding: 15px;

}

.boxquart+.boxquart{
margin-left: 20px;
}
.boxquart {
height: 400px;
display: inline-block;
background-color: black;
padding: 15px;
width: 272px;
}

Il faut utiliser deux règles incontournables pour ce procédé :

.maClasse {
background-image: url('AdresseDeMonImage.jpg');
background-size: cover; /* recouvre tout l'élément */
}

Exemple en ligne : layout image
Modifié par Olivier C (12 Sep 2017 - 07:21)