How to design a gradient background of a page with unfixed height

Question

How to design

1) a vertical gradient background with unfixed height,

2) a vertical gradient background with fixed height (say 600px, from blue to white to green), then the rest has the same green color?

---

update

Now the new design is from the top to the bottom, 120px fixed height from blue to white, then unfixed height for white, and then 120px fixed height from white to green. How to code that?

Answer 1

There is a way to do it, you will want to take advantage of the available background properties:

body {
    background-color: green;
    background-image: linear-gradient(blue, white, green);
    background-repeat: no-repeat;
    background-size: 100% 600px;
}

Live example: http://jsfiddle.net/sl1dr/PxNhY/

If you want an unfixed height then replace 600px with 100%.

EDIT: Here is the new solution according to your changes: http://jsfiddle.net/sl1dr/EtYLZ/