Fixed gradient background with css

Question

I would like for my page to have a gradient background flowing from top to bottom. I want the background to act like a fixed image in that the gradient stretches from the top of the current browser viewport to the bottom and looks the same as you scroll up and down the page. In other words, it does not repeat when you scroll. It stays fixed in place.

So what I want is this:

and after scrolling to the bottom you see this

Notice that the gradient looks exactly the same on the bottom of the page as it does on the top. It goes from full yellow to full red.

The best I'm actually able to do is having the gradient span the entire content of the page instead of just the viewable portion, like this:

and the bottom looks like this:

Notice here that the gradient spans the entire length of the content, not just what is currently visible. So at the top of the page you see mostly yellow and at the bottom of the page you see mostly red.

I suppose I could solve this using an image stretched in the y plane and repeated in the x plane but I'd rather not do this since if possible since stretching the image might leading to a blocky, non granular looking gradient. Can this be done dynamically with just CSS?

Answer 1

If you wish to do this using CSS3 gradients, try using the background-attachment property

For example, if you are applying your gradients to #background, then add this after the CSS gradient.

background-attachment: fixed;

Note: You must add background-attachment after the background properties.

Your entire code might look like this:

#background {   background: #1e5799;   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));   background: -webkit-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);   background:    -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);   background:     -ms-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);   background:      -o-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);   background:         linear-gradient(to bottom, #1e5799 0%, #7db9e8 100%);   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );   background-attachment: fixed; } 

Answer 2

html {   height: 100%;   /* fallback */   background-color: #1a82f7;   background: url(images/linear_bg_2.png);   background-repeat: repeat-x;    /* Safari 4-5, Chrome 1-9 */   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));    /* Safari 5.1, Chrome 10+ */   background: -webkit-linear-gradient(top, #2F2727, #1a82f7);    /* Firefox 3.6+ */   background: -moz-linear-gradient(top, #2F2727, #1a82f7);    /* IE 10 */   background: -ms-linear-gradient(top, #2F2727, #1a82f7);    /* Opera 11.10+ */   background: -o-linear-gradient(top, #2F2727, #1a82f7); } 

http://css-tricks.com/examples/CSS3Gradient/
http://css-tricks.com/css3-gradients/

Depending on what browsers you support, you may or may not want an image fallback. If not, you might want to include the filter and -ms-filter syntax instead to allow for IE 6-8. Even without this or an image it will fallback to the background-color