514

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?

Improve this question
0

13 Answers 13

Reset to default
851

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

16 Comments

I also found out that I needed to add margin:0; on body or else I got a gap at the bottom of my page.
In Chrome and Safari, body { height: 100% } results in the page (but not the gradient) extending down out of the viewport.
I had to add a background-attachment: fixed; to the body to get rid of the bottom gap (Webkit).
Setting a background to the body and then the height of the html tag to 100% does weird things in Internet Explorer. Here's an example (png).
Make sure that background-repeat and background-attachment come after your background rules. Otherwise, the background might still repeat.
|
186

Regarding a previous answer, setting html and body to height: 100% doesn't seem to work if the content needs to scroll. Adding fixed to the background seems to fix that - no need for height: 100%;

E.g.:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

Improve this answer

5 Comments

This worked for me in every browser I tested (Chrome [Mac], Safari [Mac], Firefox [Mac/Win7], IE9 [Win7] and Opera [Mac]) without the scrollbar side effect of the "height: 100%" solution. Thanks!
A note for those people using Sass/Compass. You can't set "fixed" directly in the mixin so to add fixed you add the property background-attachment: fixed
If you want to have either the background fill the window, or the content (whichever is greater) then use min-height:100% (in compatible browsers)
I was able to execute the following code using Compass: @include background(linear-gradient(top, red 0%, blue 100%) fixed);
How would I add a third color?
47

I know I'm late to the party, but here's a more solid answer.

All you need to do is use min-height: 100%; rather than height: 100%; and your gradient background will extend the entire height of the content without repeating, even if the content is scrollable.

Like this:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#b5e48c, #457b9d);
}

There's a second solution though.

As others have said, adding the value fixed to the background declaration, will make the gradient extend the full height of the viewport.

Like this:

body {
    background: linear-gradient(#b5e48c, #457b9d) fixed;
}

Granted, you still need to declare min-height: 100%; in the html.

Here's a demo in CodePen where you can play with both solutions: https://codepen.io/ricardozea/pen/abwGBmz?editors=1100

Improve this answer

2 Comments

Unless you need to set html height to 100%, for example if you need sticky footer
Amazing! This was really helpful
15

Here's what I did to solve this problem... it will show the gradient for the full length of the content, then simply fallback to the background color (normally the last color in the gradient).

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }
<body>
  <h1>Hello world!</h1>
</body>

I've tested this in FireFox 3.6, Safari 4, and Chrome, I keep the background-color in the body for any browsers that for some reason don't support styling the HTML tag.

Improve this answer

Comments

14

Setting html { height: 100%} can wreak havoc with IE. Here's an example (png). But you know what works great? Just set your background on the <html> tag. 

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

Background extends to the bottom and no weird scrolling behavior occurs. You can skip all of the other fixes. And this is broadly supported. I haven't found a browser that doesn't let you apply a background to the html tag. It's perfectly valid CSS and has been for a while. :)

Improve this answer

5 Comments

@Lynda That's not very helpful feedback. Would you mind providing a case where it doesn't work?
Sorry for being vague. I am unsure why it doesn't work. You can add a gradient to html but it stops part way down the page in my case. Adding background-attachment:fixed does solve the issue. I've seen this happen on more than one site but haven't been able to find the cause.
The point of this solution is that it worked across browsers (in 2012, by the way). But you still don't indicate what browser you're talking about. If you're still having trouble, try adding html, body { height: 100%; }.
True. It happens in Firefox and Chrome (didn't test in other browsers) and I tried height and various other settings without any luck (except background-attachment). Oh well, not a big deal and hopefully your answer still works for most. =>
Still have to fool with no-repeat and fixed.
12

There is a lot of partial information on this page, but not a complete one. Here is what I do:

  1. Create a gradient here: http://www.colorzilla.com/gradient-editor/
  2. Set gradient on HTML instead of BODY.
  3. Fix the background on HTML with "background-attachment: fixed;"
  4. Turn off the top and bottom margins on BODY
  5. (optional) I usually create a <DIV id='container'> that I put all of my content in

Here is an example:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

This has been tested with IE, Chrome, and Firefox on pages of various sizes and scrolling needs.

Improve this answer

4 Comments

Great! I was using colorzilla and the main answer didn't work for me. This one did. Thank you! :)
Why is your preference to do it on HTML, not on BODY?
@sashaikevich Great question. I haven't hardly looked at this answer in 5 years so I don't remember at all. The reason I did it might not even still apply with all of the browser updates. If you moved it all to body, I'd be curious if it worked the same.
@RickSmith Nope, I styled html. But, I did move the rules to apply to body just now to check, and that made no difference. Maybe it was an old browser thing...
6

Adding a space and the word fixed to the end should be sufficient. No need to set heights.

body{
    background: linear-gradient(#e4efe9,#93a5cf) fixed;
}
Improve this answer

3 Comments

The "space" between the last parenthesis and the notation fixed, is required in the background shorthand syntax. So the "space" isn't the solution, but the notation fixed. Which it's a different solution because unlike mine above, the gradient background extends the height of the viewport, whereas mine, extends the height of the content. I think this is a great solution as well.
Actually, I take that back, the space between the last parenthesis and the notation fixed is NOT required.
This should be the accepted answer.
4

Dirty; maybe could you just add a min-height: 100%; to the html, and body tags? That or at least set a default background color that is the end gradient color as well.

Improve this answer

1 Comment

The default background set as the end gradient color would be a great solution if the gradient stopped, but it doesn't just stop it repeats so the default background would only be seen if the gradient is unsupported.
2

I had trouble getting the answers in here to work.
I found it worked better to fix a full-size div in the body, give it a negative z-index, and attach the gradient to it. 

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

Here's a full sample https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

Improve this answer

Comments

0

I have used this CSS code and it worked for me:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

A related information is that you can create your own great gradients at http://www.colorzilla.com/gradient-editor/

/Sten

Improve this answer

Comments

-1

this is what I did:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

before I floated the body, there was a gap on top, and it was showing the background color of html. if I remove the bgcolor of html, when I scroll down, the gradient is cut. so I floated the body and set it's position to relative and the width to 100%. it worked on safari, chrome, firefox, opera, internet expl.. oh wait. :P

what do you guys think?

Improve this answer

Comments

-2 
background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;
Improve this answer

1 Comment

Please add some explanation on the key aspects of your solution.
-5

instead of 100% i just add some pixxel got this now and it works for whole page without gap:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }
Improve this answer

1 Comment

what about pages with > 1420 px in height?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.