Hi,
I have problem while I'm adding a CSS3 background Gradient, when the content is fully loaded, the height of the page become fixed and the background gradient is repeated. I have this problem only when I add a CSS3 Gradient.
When I have a background image or background color, everything is Ok.

See the image attached:
With Background color: http://postimage.org/image/zd5hahutp/
With Background Gradient: http://postimage.org/image/yjqlgmtd1/

Here the CSS3 Code, change the "Body" Background Color with the code below to see the result.

background: #f1f0eb; /* Old browsers */

background: -moz-linear-gradient(top, #f1f0eb 1%, #efece6 20%, #dfded5 40%, #cdd7d9 67%, #c8d6df 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f1f0eb), color-stop(20%,#efece6), color-stop(40%,#dfded5), color-stop(67%,#cdd7d9), color-stop(100%,#c8d6df)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #f1f0eb 1%,#efece6 20%,#dfded5 40%,#cdd7d9 67%,#c8d6df 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #f1f0eb 1%,#efece6 20%,#dfded5 40%,#cdd7d9 67%,#c8d6df 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #f1f0eb 1%,#efece6 20%,#dfded5 40%,#cdd7d9 67%,#c8d6df 100%); /* IE10+ */

background: linear-gradient(to bottom, #f1f0eb 1%,#efece6 20%,#dfded5 40%,#cdd7d9 67%,#c8d6df 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f0eb', endColorstr='#c8d6df',GradientType=0 ); /* IE6-9 */

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mx1t’s picture

Priority: Critical » Major

Hi Guys I found a temporary solution.
Just make the body background fixed by adding this:

background-attachment:fixed;

ravis’s picture

Status: Needs work » Closed (fixed)