Responsive CSS layout - how to stretch the background overlay - html

Question

I am building a website with a responsive CSS layout: I have two sections here, "third" and "footer". I would like to stretch the background of third to cover up the whitespace that I have between "third" and "footer".
Here is the HTML that I am using:
<!-- Third -->
<section id="third" class="main">
<header>
<div class="container">
<h2>keep in touch</h2>
<p>we'd love to hear from you. send us your questions and comments.</p>
</div>
</header>
<div class="content dark style3 featured">
<div class="container small">
<form method="post" action="#">
<div class="row half">
<div class="6u"><input type="text" class="text" placeholder="Name" /></div>
<div class="6u"><input type="text" class="text" placeholder="Email" /></div>
</div>
<div class="row half">
<div class="12u"><textarea name="message" placeholder="Message"></textarea></div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="button" value="Send Message" /></li>
<li><input type="reset" class="button alt" value="Clear Form" /></li>
</ul>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="content style3 featured">
<ul class="icons">
<li><span>Twitter</span></li>
<li><span>Facebook</span></li>
<li><span>Instagram</span></li>
<li><span>Pinterest</span></li>
<li><span>Flickr</span></li>
</ul>
</div>
</section>
</body>
and the CSS:
.main
{
position: relative;
margin: 0;
}
.main > header
{
background: #fff;
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
}
.main > header h2
{
font-size: 2.25em;
font-weight: 100;
margin-bottom: 0;
}
.main > header p
{
margin: 2em 0 0 0;
padding: 0;
text-align: center;
}
.main > .content
{
padding: 6em 0 6em 0;
}
.main > .content > .container
{
}
.main > .content.style3
{
background: url('images/bgtr.svg') top right no-repeat,
url('images/bgbl.svg') bottom left no-repeat,
url('images/overlay.png'),
linear-gradient(45deg, #5f796b, #3a4e59, #2f394e);
}
This is what it looks like now: http://imgur.com/2gsv2Xk
How would I be able to fill in that whitespace?
Here is the CSS for the sections:
section,
article
{
margin-bottom: 0;
}
section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
.row > section,
.row > article
{
margin-bottom: 0;
}
The section article did have a margin-bottom of 3em, but I changed it to 0, and I still see the whitespace.

Answer 1

I have prepared an example for you. You can benefit from this example.
See this DEMO
Also i will give you the code:
HTML
<div class="container">
<div class="text_wrap">
<div class="div_text">
<input type='text' class='cc-mask' placeholder='Name'/>
</div>
<div class="div_text">
<input type='text' class='cc-mask' placeholder='Surname'/>
</div>
<div class="message_text">
<input type='text' class='message-mask' placeholder='Message Here'/>
</div>
<div class="send_message_clearform_wrap">
<div class="send_message">
<input type="submit" class="sendButton" value="Send Message" />
</div>
<div class="clear_form">
<input type="submit" class="clearButton" value="Celar Form" />
</div>
</div>
</div>
</div>
<div class="white_area"></div>
CSS
body {
margin:0px;
padding:0px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(-45deg, #188aad 0%,#00a698 100%);
background-image: -moz-linear-gradient(-45deg, #188aad 0%,#00a698 100%);
background-image: -o-linear-gradient(-45deg, #188aad 0%,#00a698 100%);
background-image: -ms-linear-gradient(135deg, #188aad 0%,#00a698 100%);
background-image: linear-gradient(-45deg, #188aad 0%,#00a698 100%);
-webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.container {
width:600px;
height:400px;
margin:10px auto;
}
.div_text {
float:left;
margin-left:10px;
}
.cc-mask {
display:inline-block;
height:40px;
font-size:18px;
background:none;
border-radius:3px;
border:1px solid #c1c1c1;
padding:2px;
outline:none;
width:250px;
}
.message-mask {
display:inline-block;
height:250px;
font-size:18px;
background:none;
border:1px solid #c1c1c1;
padding:2px;
outline:none;
width:518px;
margin-left:10px;
border-radius:3px;
}
.message_text {
float:left;
margin-top:10px;
}
.sendButton {
width: 220px;
height: 54px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: #fff;
font: normal 11px/24px "Lucida Grande";
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
background-image: -moz-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
background-image: -o-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
background-image: -ms-linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
background-image: linear-gradient(top, #eb5a17 0%,#eb5a17 100%);
-webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
.send_message {
float:left;
width:200px;
height:56px;
margin-top:10px;
margin-left:30px;
}
.clear_form{
float:left;
width:200px;
height:56px;
margin-top:10px;
margin-left:30px;
}
.clearButton {
width: 220px;
height: 54px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: #fff;
border:1px solid #fff;
border-radius:3px;
font: normal 11px/24px "Lucida Grande";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5;
}
.white_area {
width:100%;
background-color:#fff;
height:50px;
}