CSS3 Not Displaying Background Image + Gradient on HTML element

Problem

In general, I know that it is possible to use CSS3 to specify multiple backgrounds, and I have successfully overlaid a gradient on top of an image before. However, this seems to fail when applied to the base html element. In both Chrome and Firefox, the gradient is not rendered in the CSS below:

html {
    background:#14283C;
    background-image:url('/images/bluenoise.png?1338342472'),-webkit-gradient(radial, center 8em, 0, center 8em, 100, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0)));
    background-image:url('/images/bluenoise.png?1338342472'),-webkit-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-moz-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-o-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),-ms-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
    background-image:url('/images/bluenoise.png?1338342472'),radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0));
}

If I apply the same styles to body, the gradient is rendered correctly. Any thoughts on why there would be this difference?

Problem courtesy of: Jeff Klukas

Solution

I tried some of the tricks mentioned in the comments, but what ended up working is the following:

html{
    background:#14283C;
    background-image:-webkit-gradient(radial, center 8em, 0, center 8em, 100, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(255,255,255,0))),url('/images/bluenoise.png?1338386219');
    background-image:-webkit-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-moz-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-o-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:-ms-radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
    background-image:radial-gradient(center 8em, ellipse closest-corner, rgba(255,255,255,0.2),rgba(255,255,255,0)),url('/images/bluenoise.png?1338386219');
}

The only change is that I list the gradients before the images. It looks like the various background-image arguments are overlaid in reverse order. This explanation, though, would seem to be contradicted by ScottS's fiddle, which also shows the desired behavior despite giving the opposite ordering.

Solution courtesy of: Jeff Klukas

Discussion

The fiddle link Christoph posted worked for me as well in Chrome. To get the overlay functioning in Firefox, I had to add either a height or min-height: 100% to the html element. See this fiddle.

However, simply having content gave height as well, and also allowed the background to work for Firefox as this fiddle shows.

Apparently, the gradient needs some kind of actual height to the element to render in Firefox.

Discussion courtesy of: ScottS

This recipe can be found in it's original form on Stack Over Flow.