css full image background issue - css

Question

My webpage have 4 background images, each of them needs to be a full screen. On each background, I have some labels and texts. Here is the CSS code, I will address the issue after the code section.
html{
height:100%;
}
body{
font-family:'Roboto', sans-serif;
color:#fff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
height:100%;
}
.section{
background-attachment:inherit;
background: no-repeat center center fixed;
height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
By using this style. All background images can take full screen. However, when I resize the browser window to a small height, my labels $ text on background 1 starts to across background 1 and background 2.
If I delete the "height:100%" or using "min-height:100%" instead. Each background image will never get to full screen but I will not get my labels & text across two consecutive background images when I resize the browser window to a smaller height. Please help
Here is my HTML for the first two image background. I need each image background to take full screen on any device, with my text fields look good on each background. Here my issue is, when I shrink the height of the browser, some text will disappear (covered by the next background) due to the height of the text field > height of browser
<!-- Page Top Section -->
<div id="page-top" class="section" data-background-image="/images/background/page-top.jpg" style='background-image: url("/images/background/page-top.jpg");'>
<div class="pattern height-resize">
<div class="container">
<h1 class="site-title">
hello I am site title
</h1><!-- /.site-title -->
<h2 class="section-title">
hello I am section-1
</h2>
<div class="next-section">
<a class="go-to-about"><span></span></a>
</div><!-- /.next-section -->
</div><!-- /.container -->
</div><!-- /.pattern -->
</div><!-- /#page-top -->
<!-- Page Top Section End -->
<!-- About Us Section -->
<section id="about" class="section" data-background-image="/images/background/about-us.jpg" style='background-image: url("/images/background/about-us.jpg");'>
<div class="pattern height-resize">
<div class="container">
<h3 class="section-name">
<span>
SECTION NAME
</span>
</h3><!-- /.section-name -->
<h2 class="section-title">
SECTION TITLE
</h2><!-- /.Section-title -->
<p class="section-description">
FJDKLASJLKFJASDKLJFLKSJFLKDJSAKLFJDLKSAJ
</p><!-- /.section-description -->
<div class="next-section">
<a class="go-to-subscribe"><span></span></a>
</div><!-- /.next-section -->
</div><!-- /.container -->
</div><!-- /.pattern -->
</section><!-- /#about -->
<!-- About Us Section End -->
section title css:
.section-title{
text-align:center;
text-transform:uppercase;
font-weight:300;
font-size:80px;
}

Answer 1

If you want four divs with 100% screen size in width and height with different backgrounds that can accept any HTML inside and will fit all screen sizes, there is traditional way to do so:
Preview: http://codepen.io/kunokdev/pen/LRPPdO
HTML:
<section>
<div>Any HTML inside a first div w/ background</div>
<div>Any HTML inside a second div w/ background</div>
<div>Third is here too!</div>
<div>
<h1>Forth</h1>
<p>Forth has even more than that!</p>
</div>
</section>
CSS:
html, body {
height: 100%;
}
section {
height: 100%;
}
div {
height: 100%;
background-size: cover;
}
div:nth-child(1){
background-image: url(http://i.imgur.com/BMaWw5C.jpg);
}
div:nth-child(2){
background-image: url('http://i.imgur.com/sznCGw4.jpg');
}
div:nth-child(3){
background-image: url(http://i.imgur.com/BMaWw5C.jpg);
}
div:nth-child(4){
background-image: url('http://i.imgur.com/sznCGw4.jpg');
}
or else with viewport units:
HTML:
<div></div>
<div></div>
<div></div>
<div></div>
CSS:
div {
height: 100vh;
}
So I think you need background-size: cover; and maybe a little bit of background-position property too. In case your content overflows, consider using overflow: auto.
Additionally:
If your viewport height and width are smaller than the html inside containers, consider using media queries.
For example if your content overflows when height is 500px use query such as
media only screen and (max-width: 500px){
div {
height: auto;
}
}
Consider using Mozilla Firefox responsive design view when testing. Similar feature exists in Chrome too.
Then your contents will no longer be 100% after viewport max-width of 500px, instead they will be as large as contents inside.