Can't apply background-image: color gradient to a body tag

[george]

I have been trying to create a page with a color gradient background using CSS:

body { background-image:-moz-linear-gradient(top, #000029 50%, #000080 100%); }

But when I render the page, the gradient extends only as far as the content, and then repeats to fill the screen.

 

How can I make it so that it renders the gradient to the full browser window, regardless of the content? When I replace the body background-image attribute with a background-color attribute, it renders to the full screen, as I would expect.

 

Perhaps this can not be done, or maybe there is a workaround?

 

[Ingolme]

The body is usually only as large as the content within it, but you can fix that by setting the height of the html and body elements. THe -moz- prefix will only work in Firefox, use -webkit- and the plain CSS property to make sure it works in the widest range of browsers. I believe the first parameter needs to be "to top", "to bottom", "to left", "to right" or a numeric value.

html,body {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}

body {
  min-height: 100%;
  background-image: -webkit-linear-gradient(to top, #000029 50%, #000080 100%);
  background-image: -moz-linear-gradient(to top, #000029 50%, #000080 100%);
  background-image: linear-gradient(to top, #000029 50%, #000080 100%)
}

[george]

That did it. Thanks.