Bonjour. 

Je viens de me "re"lancer dans le Web-Dev. Mais je suis confronté à un soucis, avec mes "background-images".

En effet, elles sont coller entre-elles.. Hors j'avais imaginer quelque chose de différent

(J'ai oublié de préciser : Mais ce sont des images d'articles (Comme une boutique en ligne) Elle seront cliquable et redirigeront vers d'autres pages)

Je vous joins des photos pour exemples :

Et voilà ce que j'avais imaginer : 

Voici mon code HTML : 

<!-- Début du code -->
		<section class="lasts-news"> 

			<h2 class="section-title"> 
				Dernières recherches
			</h2>

			<div class="lasts-pics">
				<a class="pics-box l1 no-grid">
					<div class="pic-details">
						<p class="pic-name"></p>
						<p class="pic-description"></p>
					</div>
				</a>
				<!-- L'insertion des BG-Images -->
				<a class="pics-box l2 no-grid">
					<div class="pic-details">
						<p class="pic-name"></p>
						<p class="pic-dec"></p>
					</div>
				</a>
			</div>

		</section>

Voici mon code CSS :

/* Lasts News */

/* Mettre en forme le Text "Dernières recherches"*/
.section-title
{
	font-size: 50px;
	font-family: 'Abril FatFace', cursive;
	font-weight: 100;
	position: relative;
}

.section-title::before 
{
	content: "";
	position: absolute;
	background-color:slategray;
	width: 300px;
	height: 7px;
	bottom: 0;
}

/* Sépare le texte de la marge */
.lasts-news
{
	margin: 100px;
	
}

.lasts-pics
{
	background-color: tomato;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 500px;
}

.pics-box
{
	position: relative;
	background-size: cover;
	background-position: center;
	

}

.no-grid
{
	min-width: 350px;
	height: 500px;
	flex: 1;

}

/* Ajout des photos */
.l1
{
	background-image: url(../images/latest/1.jpg);

}

Voilà j'espère vraiment avoir quelques réponses :) 

Merci beaucoup d'avance 

-
Edité par TrajaRaspi 10 avril 2021 à 14:19:47

.lasts-pics
{
    background-color: tomato;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 500px;
}