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 */
Comment | File | Size | Author |
---|---|---|---|
Capture d’écran 2012-09-18 à 13.07.24.png | 88.76 KB | mx1t | |
Capture d’écran 2012-09-18 à 13.06.36.png | 103.78 KB | mx1t |
Comments
Comment #1
mx1t CreditAttribution: mx1t commentedHi Guys I found a temporary solution.
Just make the body background fixed by adding this:
Comment #2
ravis CreditAttribution: ravis commented