The reason why "#ScalableImage" overlaps "#BlockBlue1" is because you have position: absolute
in your styling of "#ScalableImage" - so it gets pulled out of the layout, and as such covers other elements.
To achieve what (I think) you're looking for, you may want to remove that position:absolute
style, then add:
body, html{
height:100%;
margin:0;
}
(The 0 margin is just in case the browser renders the body/html elements with a margin.)
I hope this is helpful for you. Good luck!
(Edit) Added a JSFiddle to show you what I'm seeing: http://jsfiddle.net/BDd62/
(Edit 2) Having seen your additional code, I think I've identified the reason for that white space. It's because of your top margin on "#htxt", which actually moves its parent element in this case. (You can read a more in-depth explanation of which this happens here. You can avoid this in a couple ways, but here are the changed areas in your CSS that I made. If this isn't the layout you wanted, please let me know:
#bg {
display:block;
width:100%;
height:100%;
max-height:900px;
background: url(http://bwpcommunications.com/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:700;
}
#htxt {
position:relative;
font-family: 'Raleway';
font-weight:bold;
font-size: 6em;
text-align:center;
color:#FFF;
width:80%;
max-width:960px;
line-height:100px;
margin:0 auto 22%;
padding:22% 0 0;
z-index:800;
}
#hsubtxt {
position:relative;
font-family: 'Raleway';
font-size: 3em;
text-align:center;
color:#FFF;
width:80%;
margin:2% auto 0;
z-index:800;
}
Hope this helps you out! Here's your updated JSFiddle to see the full code, but I suggest running it in a full browser (since your layout isn't optimized for the small window size of the JSFiddle environment.