<Section> Backgrounds floating apart/ over each other - html

Question

I'm trying to make a landing page with several different sections like chartbeat.com. I've done the following in my HTML:
<section class="payroll">
<p>
This is the Payroll Section
</p>
</section><!-- END class="payroll" -->
<section class="pos">
<p>
This is the Point of Sale Section
</p>
</section><!-- END class="pos" -->
and this is what my CSS looks like:
.payroll {
background-image: url('../img/payroll_bg.jpg');
background-repeat: repeat-x;
height: 100%;
}
.pos {
background-image: url('../img/pos_bg.jpg');
background-repeat: repeat-x;
height: 100%;
}
The problem is the sections are floating apart, leaving a large gap between them. See picture. If I shrink the window, or inspect element, the sections float up to overlap each other.
Any ideas? Thanks!

Answer 1

I think the problem is being caused by your 100% heights. You need to set a height on the parent element because any percentage dimensions are based on the size of it.
Moving away from percentages, like you have done, would also do the trick.

Answer 2

create a .wrapper div and use this:
.wrapper {
width:100%; /* you can define as you want */
height:100%; /* you can define as you want */
position:relative;
}
.payroll {
background-image: url('../img/payroll_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
width:0 auto;
}
.pos {
background-image: url('../img/pos_bg.jpg');
background-repeat: repeat-x;
height: 100%;
position:absolute;
top:0;
left:0;
opacity:0.9;
width:0 auto;
}