Having trouble with my website development...
I want to insert an <article> after the <header> with a full-screen background intro, but it seems to overlap with my <div> even though it's in the header and the article is in the body.
I checked out Full screen image background on header but it didn't solve my issue...
Here's my code :
css
body{
margin:0;
}
.intro{
height: 100%;
width: 100%;
/*background-size: cover;*/
}
.text-intro{
padding-top: 10%;
padding-left: 5%;
}
.bg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 42px;
color: white;
margin-top: 0;
margin-bottom: 0;
}
article h2{
color: white;
}
header h2{
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 400;
color: white;
opacity: 0.3;
margin-top: 7px;
margin-bottom: 7px;
}
.btn-intro a{
display: block;
font-size: 35px;
margin-top: 45px;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
color: #FFEA00;
border: solid #FFEA00 2px;
width: 379px;
padding: 21px;
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
.btn-intro a:hover{
display: block;
font-size: 35px;
margin-top: 45px;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
color: black;
background-color: #FFEA00;
border: solid #FFEA00 2px;
width: 379px;
padding: 21px;
-o-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
.social img{
width: 25px;
height: 25px;
padding-right: 5px;
}
article{
position: relative;
}
html
<body>
<header>
<div class="intro">
<img class="bg" src="images/bg-intro.png">
<div class="text-intro">
<div class="social">
<a href="https://www.facebook.com/WarexStudio"><img src="images/facebook.svg" alt="Facebook"></a>
<a href="https://www.twitter.com/KoenigTheo"><img src="images/twitter.svg" alt="Twitter"></a>
</div>
<h2>Portraits of A1 group members</h2>
<h1>Theo Koenig</h1>
<h2>MMi Montbéliard</h2>
<div class="btn-intro">
<a href="">VIEW PORTRAITS</a>
</div>
</div>
</div>
</header>
<article>
<h2>TP Group A1</h2>
</article>
</body>