Background gradient doesn't apply to full screen length

HTML & CSS
1

I am using this CSS background gradient generator: http://www.colorzilla.com/gradient-editor/

The problem I have is the background breaks and doesn’t apply to the full length of the screen as you can see here:
http://localdigitalnow.com/bistro/

2

You could try something like

html, body {
     height: 100%;
}

Not sure if that will work in all browsers, though, so make sure to check.

3

Thanks Ralph, it worked.

I thought I had tried this before.

4

I guess I spoke too soon.

html{
height:100%;
}

This works on my desktop browser (Chrome) but there are still breaks on my iPhone.
Here is the site I am working on now: http://localdigitalnow.com/nirvana/

5

Anyone have any ideas? The background gradient still breaks near the bottom when viewing on my iPhone.

html, body {
margin:0;
padding:0;
height:100%;
}

body {
background: #f7f1c0; /* Old browsers /
background: -moz-linear-gradient(top, #f7f1c0 0%, #b7ad70 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f1c0), color-stop(100%,#b7ad70)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #f7f1c0 0%,#b7ad70 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #f7f1c0 0%,#b7ad70 100%); / Opera11.10+ /
background: -ms-linear-gradient(top, #f7f1c0 0%,#b7ad70 100%); / IE10+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#f7f1c0’, endColorstr=‘#b7ad70’,GradientType=0 ); / IE6-9 /
background: linear-gradient(top, #f7f1c0 0%,#b7ad70 100%); / W3C */
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#000;
}

6

Thanks to Stackoverflow I finally found the answer! I had this problem for over a month. I added the following property
background-attachment: fixed.

Here is the link to the thread:
http://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats

7