Question

I have a CSS gradient that runs the height of the page:

html {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5fcc2), color-stop(47%,#ecfdd2), color-stop(100%,#fafef3));
    background-image: -moz-linear-gradient(#e5fcc2, #fafef3);
    background-repeat: no-repeat;
    height: 100%;
}

Yet for some reason, when I resize my window, specifically when I make it smaller, there is a large white area at the bottom of the page where the gradient runts out. When the window is long, I don’t have this problem.

Any idea how to fix this?

Answer 1

Figured this out.

Needed to set min-height: 100% which worked across Chrome 21, FF 12 and Safari 6.
I also had background-repeat: no-repeat; in the html block.