Question

first time posting – I hope somebody can help.

I have a gradient background on a page which uses ajax (and becomes quite long after the call).

In IE (version 9) the gradient background stays the same when I scroll down, however in Firefox (version 6) the gradient is correct for one normal page length, but when I scroll down the background gradient repeats itself.

Is there any way I can get firefox to do the same as IE (stay the same no matter how far I scroll?

Here is my css relating to the gradient:

html {
    background-color: #8c827a;
    height: 100%;
    margin: 0 0 1px;
    padding: 15px;

    /* Mozilla: */
    background: -moz-linear-gradient(top, #8c827a, #2B2825);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#8c827a), to(#2B2825));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#8c827a', EndColorStr='#2B2825', GradientType=0);
}

Answer 1

To make other browsers behave the same as Internet Explorer, you can make the background fixed:

html {
    background-attachment: fixed
}

Make sure you place background-attachment after the two background declarations.