Hi,
I find gradients awkward to work with but you can set the height if you set the colour stops in pixels and not percentages.
e.g.
This one stretches with the element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.test {
float:left;
width:200px;
height:300px;
margin:10px;
border:1px solid #000;
background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,183,234,1)), color-stop(73%, rgba(255,255,255,0.96)), color-stop(100%, rgba(255,255,255,0.95))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 73%, rgba(255,255,255,0.95) 100%); /* W3C */
}
.test2{height:100px}
.test3{height:500px}
.test4{height:400px}
</style>
</head>
<body>
<div class="test"> </div>
<div class="test test2"> </div>
<div class="test test3"> </div>
<div class="test test4"> </div>
</body>
</html>
If we change the colour stops to pixels then it stays at a fixed height.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.test {
float:left;
width:200px;
height:300px;
margin:10px;
border:1px solid #000;
background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,183,234,1)), color-stop(100px, rgba(255,255,255,0.96)), color-stop(150px, rgba(255,255,255,0.95))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,183,234,1) 0%, rgba(255,255,255,0.96) 100px, rgba(255,255,255,0.95) 150px); /* W3C */
}
.test2 { height:100px }
.test3 { height:500px }
.test4 { height:400px }
</style>
</head>
<body>
<div class="test"> </div>
<div class="test test2"> </div>
<div class="test test3"> </div>
<div class="test test4"> </div>
</body>
</html>
I used the gradient generator to produce the first section of code.