CSS3 gradient background set on body doesn't stretch but instead repeats?

css gradient
JD Isaacks picture JD Isaacks · May 19, 2010 · Viewed 332.8k times · Source

ok say the content inside the <body> totals 300px high.

If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient

Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window.

I am assuming this is not a bug since it is the same in both webkit and gecko.

But is there a way to make the gradient stretch to fill the window instead of repeat?

Answer

Bryan Downing picture Bryan Downing · May 20, 2010

Apply the following CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Edit: Added margin: 0; to body declaration per comments (Martin).

Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).

Related questions

How do I combine a background-image and CSS3 gradient on the same element?

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

Read More
Gradient borders

I'm trying to apply a gradient to a border, I thought it was as simple as doing this: border-color: -moz-linear-gradient(top, #555555, #111111); But this does not work. Does anyone know what is the correct way to do border gradients?

Read More
CSS3 Transparency + Gradient

RGBA is extremely fun, and so is -webkit-gradient, -moz-gradient, and uh... progid:DXImageTransform.Microsoft.gradient... yeah. :) Is there a way to combine the two, RGBA and gradients, so that there's gradient of alpha transparency using the current/latest CSS specs.

Read More