Making gradient adapt to browser height

Question

If you open my page at http://goo.gl/68s0t (Please don't replace the link here as I don't want google to link this page to my site.) in a non-maximized window and maximize it after it loaded, you see the gradient start over again in the lower part. In opera it is one gradient but in other browsers it repeats vertically.

How can I make it not repeat, ie make the gradient adapt to current browser height?
Sometimes, I see blue squares in the lower right and left corner, what causes them?

All links on StackOverflow are tagged `nofollow`. Also you should make a simplified example before posting here; people won't debug your code for you. — Dave, Apr 07 '13 at 23:39
your answer is here: http://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats — Mehdi Yeganeh, Apr 07 '13 at 23:48
@Dave I changed the main post. How would you simplify this issue without leaving out important parts? I don't see your point. — Santiago de Cuba, Apr 08 '13 at 00:03

score 0 · Accepted Answer · answered Apr 07 '13 at 23:54

To answer (2), the blue squares are caused by the background being applied to both the body and the html elements. Since the body is given a small margin (from the browser, by default), it extends downwards a few pixels beyond the html. They both have the same height, the body is just offset by 8px vertically.

The margin on the left and right causes these small boxes.

To fix this, remove the background from the html, only apply it to the body, and change the margin to padding, if you want the space there.

Like http://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats — Santiago de Cuba, Apr 08 '13 at 00:05

Making gradient adapt to browser height

1 Answers1