Header and Background Image Fixed Content and Footer scrolling

Question

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.

Answer 1

Use overflow:scroll; to scroll your content

.clearfix{
    width: 960px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid #fff;
    overflow:scroll;
}

You can write your footer inside your div, this will scroll the footer with content