Richard Milewski
Setting the body background-color to a solid color fills the entire screen with color.
But setting the body background-image to a -moz-linear-gradient only fills to the bottom of the content.
Firefox users see an orange gradient here. Safari, Chrome and other webkit-based browsers see a green gradient if their browser supports the newer -webkit-linear-gradient CSS and a blue one if it only supports the older -webkit-gradient(linear,...).
This seems inconsistent with the MDC documentation for background-image and -moz-linear-gradient, and the Webkit Blog documentation for CSS3 Gradients, and the Safari Developer Library documentation for -webkit-gradient(linear,...).
Firefox users see an orange gradient here. Safari, Chrome and other webkit-based browsers see a green gradient if their browser supports the newer -webkit-linear-gradient CSS and a blue one if it only supports the older -webkit-gradient(linear,...). IE and Opera users don't get to play.
There is a workaround available but it's not obvious. If you add the following to your style sheet, everything works as expected:
html { min-height: 100%; }
NB: You must apply the min-height to the html element not the body element containing the background image gradient.