Header and Background Image Fixed Content and Footer scrolling

Header and Background Image Fixed Content and Footer scrolling

I have setup a fiddle for my issue Fiddle. What my requirement is? I need
the header and the background image to be fixed only. The content should
be scrolling, and the footer should also scroll with the content.
CSS
body{
margin: 0;
}
header{
height: 50px;
background: black;
width: 100%;
}
section{
background: url(http://dummyimage.com/600x400);
height: 400px;
repeast: no-repeat;
}
footer{
height: 50px;
background: black;
position: fixed;
width: 100%;
}
.clearfix{
width: 960px;
height: 400px;
margin-left: auto;
margin-right: auto;
border: 5px solid #fff;
}
HTML
<header></header>
<section>
<div class="clearfix">
What my requirement is? I want the footer and background image to
be position fixed and the footer should be scrolling with the
large content.
</div>
</section>
<footer></footer>
Thanks guys.