Jump to content

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

Recommended Posts

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?


Share this post

Link to post
Share on other sites

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%)
  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...