Bonsoir, lorsque j'utilise margin:auto; pour centrer le conteneur #big-intro-wrapper-content par dessus un background-image, tout le conteneur ainsi que ses éléments à l'intérieur disparaissent. Mais quand j'utilise un position:absolute; le conteneur #big-intro-wrapper-content s'affiche sans problème. Pourtant j'ai bien mit un z-index supérieur au background-image pour le #big-intro-wrapper-content afin qu'il s'affiche bien. Merci à ceux qui m'aideront.
CODE CSS :
#big-intro-wrapper-banner {
position:absolute;
top:0;
left:0;
display:block;
z-index:1010;
width:100%;
height:100%;
}
.banner {
display:block;
width:100%;
height:100%;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
#big-intro-wrapper-content {
height:100%;
width:100%;
z-index:1068;
color:#ffffff;
}
#big-intro-wrapper-content h2 {
font-family:geolight;
font-size:38px;
text-align:center;
}
#big-intro-wrapper-content p {
display:flex;
justify-content:center;
margin:25px;
font-weight:bold;
}
#social-networks-content {
display:flex;
align-items:center;
flex-direction:column;
}
CODE HTML :
<div id="big-intro-wrapper-banner">
<span class="banner" style="background-image:url(//localhost/helpfinding/assets/images/banner.jpg"></span>
</div>
<div id="big-intro-wrapper-content">
<h2>test test test test test test test test test test test test.</h2>
<p>Suivez-nous sur les réseaux sociaux.</p>
<div id="social-networks-content">
<div class="twitter-btn"><i class="fa fa-twitter" aria-hidden="true"></i>Twitter</div>
<div class="facebook-btn"><i class="fa fa-facebook" aria-hidden="true"></i>Facebook</div>
</div>
</div>