28172 sujets

CSS et mise en forme, CSS3

Bonjour

Je rencontre un problème que je n'arrive pas à résoudre. Pourriez-vous m'aider s'il vous plaît ?

Voir image ci-dessous:

http://imgur.com/a/Wv8EB

Le background-image est au-dessus du titre et je n'arrive pas à mettre le titre au-dessus...

Voici la page html:


<div id="bg_white" class="box_ce2 box_exp">
						<div class="aos-item" data-aos="fade-up">
	    					<div class="aos-item__inner">
								<div class="title_bg">
									<div class="angle-droite"></div>
									<h3 class="h3_int">Centre d'interêt</h3>
								</div>
							</div>
						</div>
						<div class="aos-item" data-aos="fade-left">
	    					<div class="aos-item__inner">
								<ul id="bg_white" class="compt box_compt">
									<li><p><span class="bold_text">Text bold</span>  Texte texte texte texte</p></li>
									<li><p><span class="bold_text">Text bold</span>  Texte texte texte texte</p></li>
									<li><p><span class="bold_text">Sports</span> Texte texte texte texte</p></li>
								</ul>
							</div>
						</div>
					</div>



.box_ce2 {
	width: 							42%;
	padding-left: 					30px;
	padding-top: 					30px;
	padding-right: 					30px;
	padding-bottom: 				10px;
	
}
.angle-droite {
    background-image: 				url("./img/angle-droite-gradient.png");
    background-position: 			0 50px;
    background-repeat: 				no-repeat;
    height: 						550px;
    margin-top: 					-80px;
    position: 						absolute;
    right: 							-95px;
    width: 							506px;
    z-index: 						0;
}
.box_comp {
	display: 						block;
}

.box_exp {
	display:						block;
	float: 							right;
	margin-top: 					-200px;
}
.title_bg {
	display: 						block;
	width: 							580px;
	height: 						150px;
	z-index: 						20;
}


Merci par avance de votre aide !
Bonne journée.
Modifié par Damingo (16 May 2017 - 10:58)
OK je n'étais pas bien réveillé !

Il a suffit de mettre la titre dans la div du background :


<div class="title_bg">
      <div class="angle-droite">
            <h3 class="h3_int">Centre d'interêt</h3>
       </div>
</div>
Meilleure solution