Tue, 2012-08-14 18:35
Hi,
after a couple of hours I try to fix a crossbrowser problem for having a gradient within my background.
The gradient solution is like this:
html { background: -moz-linear-gradient(top, #211f1e 0%, #383e41 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#211f1e), color-stop(100%,#383e41)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #211f1e 0%,#383e41 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #211f1e 0%,#383e41 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #211f1e 0%,#383e41 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#211f1e', endColorstr='#383e41',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #211f1e 0%,#383e41 100%); /* W3C */ }
This works at all but if the size of the page is not fullsize the gradient is cutted after the content if the side have no overflow.
To fix this I just use a
height: 100%
in the html tag.
Now the startpage with no overfrlow is fine but when I change to an other side where the display is more than 100% and scrollbars are needed the gradient repeats (meaning it starts there again) when I scroll down.
As this looks terrible maybe somebody can help me for a nice gradient that ever works fine not depending the height of the content ...
Thanks
Andre
Wed, 2012-08-15 08:28
#1
Not tested
Put the gradient on body instead of html. If we could see the site, it would be easier to debug. The way html and body react to content is affected by the DTD you use, so it's another factor.
cheers,
gary