Bootstrap footer covering content

Question

I have been trying to fix this issue for days. I see a lot questions about it, but none of the solutions seem to be working for me.

I have a website that has a Bootstrap 3 front end. I want a sticky bottom footer and I'm using Bootstrap's navbar navbar-fixed-bottom styles to achieve this. It is working, but the problem is that the content will overlap with the footer when there is not enough room. I want to be able to scroll the content with the footer and header fixed and I don't want the footer to scroll with the content.

Here is the site. You can resize the height of your browser to see what I'm talking about.

Any help would be appreciated!

Answer 1

Icemanind, What I did here to help your issue was this.
I added height to the body.
I set the background image not using the bodytag and fixed it.
This way it now scrolls and the menu and footer stays fixed.
I also made the background image no repeat.

Is this what you were wanting.

Here is the Fiddle.

The css link to your custom css didn't want to play ball in the fiddle, but in a mock up works fine.

<style>
body{
   height:2000px; 
}
.bg-image {
    position: fixed;
    width: 100%;
    height:100vh;
    background: url('http://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -100;
}    
</style>  

Updated.

Made a change to the Fiddle, I have added a transparent area to act as some content that is 2000px height.
I have added some margin to the bottom of this content. Have a look now and see if that is what you are after here.
Here is a full size Fiddle.