Background gradient doesn't apply to full screen length

I am using this CSS background gradient generator:

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

You could try something like

html, body {
     height: 100%;

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

Thanks Ralph, it worked.

I thought I had tried this before.

I guess I spoke too soon.


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

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

html, body {

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;

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: