CSS Background Gradient Issue

I am experiencing an issue with a background gradient I created using CSS.

Below is an image of the issue:

[img]https://goo.gl/photos/5x8eu5bNFrJmQGTf9[/img]

The issue I am having is that the gradient starts to repeat itself after a certain height. I do not want it to do so. If my page is 750px high, I want the gradient to be 750px high, too — no more, no less. I want the size of the gradient to change, depending on the size of that particular page. What am I doing incorrectly? Below is my CSS code:

[code=html]
body {
background: #98cbfe; /* For browsers that do not support gradients */
background-repeat: no-repeat;
background: -webkit-linear-gradient(#98cbfe, #89b7e5, #7aa3cc); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#98cbfe, #89b7e5, #7aa3cc); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#98cbfe, #89b7e5, #7aa3cc); /* For Firefox 3.6 to 15 */
background: linear-gradient(#98cbfe, #89b7e5, #7aa3cc); /* Standard syntax */
height: 900px;
}

#container {
margin-left:auto;
margin-right:auto;
height:200px;
width:940px;
}
[/code]

Also in #CSS _↴