css footer background didn't shows properly in html5 - css

Question

Here is my css code:
.footer{
clear:both;
background:url('../img/footer-bg.jpg');
overflow: hidden;
}
.footer-left{
float:left;
width: 50%;
}
.footer-right{
float:right;
width:50%;
}
.footer-nav .list-1 {
font-size:13px;
font-weight:600;
text-align: center;
}
.footer-nav .list-2 {
font-size:12px;
font-weight:600;
text-align: center;
}
.footer-nav ul li{
display:inline;
padding:8px;
}
.copyright{
font-size:13px;
text-align: center;
}
Here is my JSfiddle link: http://jsfiddle.net/3jet0dfu/12/
May i know how to set background image to 100% attached with window screen.and the footer content need to display right of image.
Now i added <hr /> line for footer-left and footer-right at the top and bottom.
But it shows at the top only, Can anybody help me exact css style to fix this.
I need look like this http://s30.postimg.org/gvqtdrmqp/article_page4.jpg.
Thanks in advance.

Answer 1

add to css
header,section{
margin:0 auto;
width:939px;}
and edit body css like this
body{
font-family: Raleway, sans-serif;
}
this working page jsfiddle

Answer 2

remove the 2 and replace the following html and add the css
<div id="footer-holder">
<div class="footer-left">
<img src="http://s18.postimg.org/itr24b7s9/footer1.png" alt="footer-image" />
<div class="footer-content">
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">Less of boring theory! Hands on programming is our training methodology! You'll love it.<p>
learn more
</div>
</div>
<div class="footer-right">
<img src="http://s18.postimg.org/gl8a98bah/footer2.png" alt="footer-image" />
<div class="footer-content">
<p class="footer-title">Shopify Expert at $20/hour</p>
<p class="footer-pgf">Unique custom made shopify theme and tweakss. Strat selling online with stunning eCommerce storefronts created using the Shopify CMS</p>
learn more
</div>
</div>
<div style="clear:both"></div>
</div>
#footer-holder{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image:url(border.png) 30 30 round; /* Opera 11-12.1 */
border-image:url(border.png) 30 30 round;
border-left:none;
border-right:none;
width: 100%;
}