47

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:

enter image description here

and after scrolling to the bottom you see this enter image description here

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:

enter image description here

and the bottom looks like this: enter image description here

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?

d512
  • 32,267
  • 28
  • 81
  • 107
  • 1
    You mentioned that "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." How did you do that? That's exactly what I need. – RockPaperLz- Mask it or Casket May 10 '15 at 02:51

4 Answers4

104

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;
}
KyleMit
  • 30,350
  • 66
  • 462
  • 664
ScottA
  • 1,751
  • 1
  • 11
  • 13
  • 9
    Important: You must add this after the background properties. - Exactly – William Walseth Jan 26 '15 at 22:47
  • 1
    It is also worth noting that on Firefox (and possibly other browsers) that the default behaviour of `background-attachment` is *NOT* retained, I found that even with adding `!important` that when a later element was setting a basic simple `background-color:` that this was *unsetting* all other background properties including `background-attachment`. – Martin May 07 '16 at 18:41
  • "You must add this after the background properties" - lifesaver @ScottA - thanks! – Mystus May 25 '17 at 10:58
  • Modern browsers only need ``background: linear-gradient(to bottom, #1e5799 0%, #7db9e8 100%);`` (https://developer.mozilla.org/en-US/docs/Web/CSS/gradient) – MAMY Sébastien Jun 06 '23 at 07:33
3

I guess using the ::before pseudo-element can be an option as well, thanks for the background-attachment @ScottA great one

article {position:relative}
article:before {
  content: '';
  height:100vh;
  width:100%;
  position: fixed;
  top: 0;
  z-index:-1;
  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 );
  
}
<article> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
Senpai.D
  • 439
  • 3
  • 14
  • This one works well, but the `background-attachment` solution is of course the more straightforward one for gradients and images. This one nevertheless can be useful if you want to - let's say - put a whole page into the background. – Fred Jan 03 '22 at 11:14
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

Michael Lawton
  • 1,460
  • 1
  • 14
  • 25
  • 1
    I would like the gradient to remain fixed in place so it never changes even if you scroll. With this code, the gradient repeats when you scroll. I'll clarify that in the original post. – d512 Aug 07 '13 at 04:23
-5

Another way of doing this (with actual image):

body {
  background-attachment: local; // or 'fixed' here
  background-image: url(fancy.jpg);
  background-size: 100% 100%;
  overflow:auto;
  box-sizing:border-box;
  width:100%;
  height:100%;
  margin:0; 
}
c-smile
  • 26,734
  • 7
  • 59
  • 86