1 reply [Last post]
Andre72
Andre72's picture
Offline
newbie
Germany
Last seen: 7 years 9 weeks ago
Germany
Timezone: GMT+2
Joined: 2012-08-14
Posts: 1
Points: 2

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 34 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.