CODEWITHSUNDEEP
htmlfirefoxcssradial-gradients
lars
lars

Reputation: 99

CSS3 Firefox radial gradient disappears

I've got an HTML5 page with the background of:

background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);

This works fine, until the page gets long (15000px or so), at which point the background disappears entirely on Firefox.

Looking elsewhere provided me with two solutions that won't work for this. They were to use html & body height 100%, or background-attachment:fixed. Both match the gradient height to viewport, not document height.

This works fine for shorter pages, but breaks in FF on longer ones. Is there a CSS trick I could use without restructuring my html?

Upvotes: 0

Views: 553

Answers (2)

lars
lars

Reputation: 99

In my situation the previous answer didn't fix it, but I found a solution that did:

    background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%) no-repeat;

Once I specified "no-repeat", it would respect the 100% regardless of document height changes (infinite scroll).

Upvotes: 1

A.M.K
A.M.K

Reputation: 16785

Try specifying a min-height on the HTML node:

Demo: http://jsfiddle.net/SO_AMK/76cyn/

CSS: 

html {
    min-height: 100%;
}

body {
    background: radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -o-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
}

Or, if you want a fixed background: http://jsfiddle.net/SO_AMK/76cyn/1/

Upvotes: 0

Related Questions