Search code examples
sticky-footercss

Gradient background with a sticky footer

I'm trying to add a gradient to the body background which starts from white and ends in grey at the bottom of the page. Since the page has a sticky footer, when the content is bigger than the browser window, the body doesn't stretch/expand with the content. So the gradient stops in the middle. Can someone please help?

HTML :

<html>
    <body>
        <div class="content"> </div>
        <div class="footer"> </div>
    </body>
</html>

CSS :

html {
    height:100%;
}
body { 
    height:100%;
    background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);
}
.content {
    min-height: 100%;
}    
.footer {
    height: 55px;
}
Solution

  • background-attachment:fixed;

    Add this to your body CSS.

    On a side note you may know this already but: background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%); won't work on IE. This property is only for Mozilla Based browsers.

    Cross Browser CSS Gradient ... http://webdesignerwall.com/tutorials/cross-browser-css-gradient