Space at the top of the page (Twitter Bootstrap 3) - html

Question

I have a space at the page's top and I don't know how to remove it.
I have created background image (1,2) in my page example.
But I'm not able to find what the source of this white line. I have modified a lot of settings in css with no result.
Demo in Bootply
Here's my code:
<section id="first">
<h1>TEST!</h1> <br>
</section>
<section id="first1">
<h1>TEST2!</h1> <br>
</section>
#first {
background: url(http://placehold.it/1350x890/37FDFC/&text=photo1) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
/*height: 800px;*/
/*padding-bottom: 200px;*/
}
#first1 {
background: url(http://placehold.it/1350x890/FFFF00/&text=photo2) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
/*height: 800px;*/
/*padding-bottom: 200px;*/
}

Answer 1

Just to highlight what Christina said, this issue is being caused by the top-margin on your h1 element:
Here's a cleaned up version that replicates the problem
.background-photo {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
}
#first {
background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<section id="first" class="background-photo">
<h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
<h1>TEST2!</h1>
</section>
You can fix it by doing either of the following:
1) Adding sufficient padding to the containing section:
.background-photo {
padding-top: 20px;
}
.background-photo {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
}
#first {
background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}
.background-photo {
padding-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<section id="first" class="background-photo">
<h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
<h1>TEST2!</h1>
</section>
2) Removing the Margin on the header:
.background-photo h1 {
margin-top: 0px;
}
.background-photo {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
}
#first {
background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}
.background-photo h1 {
margin-top: 0px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<section id="first" class="background-photo">
<h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
<h1>TEST2!</h1>
</section>