0

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?

lars
  • 99
  • 1
  • 14
  • I am not experiencing the same issue: http://jsfiddle.net/7vpXW/1/. Do you have a demo of some sort? – A.M.K Sep 20 '12 at 19:33
  • Example 1: http://jsfiddle.net/7vpXW/2/. example 2: http://jsfiddle.net/7vpXW/3/. example 3: http://jsfiddle.net/7vpXW/4/. Trying to get the behavior to match that of a declared height, while leaving the height as auto. – lars Sep 21 '12 at 18:10

2 Answers2

1

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).

lars
  • 99
  • 1
  • 14
0

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/

A.M.K
  • 16,727
  • 4
  • 32
  • 64
  • Looking for non-fixed, want it to stretch to the page size. This example is one with more content causing the issue: http://jsfiddle.net/76cyn/3/ – lars Sep 21 '12 at 19:13
  • I'm not seeing it, I _was_ seeing the gradient "tiling" before but, that one looks normal to me. With Firefox 16 – A.M.K Sep 21 '12 at 19:17
  • I'm on FF15, that may be the issue. I'll grab a capture but it might just be a rendering issue. – lars Sep 21 '12 at 19:23
  • I'm going to give you the answer since it looks like an issue with just that version of FF. – lars Sep 21 '12 at 20:54
  • Thank you, at least the good news is that they already fixed it! – A.M.K Sep 21 '12 at 20:57