1

I have the following CSS code:

html {
    font-size: 62.5%;
    background-color: #04BFBF;
    background: linear-gradient(to bottom, rgba(4, 191, 191, 0), rgba(4, 191, 191, 1)), url(seagreen-cloud.png);
    background-size: 100% auto;
}

This works in Chrome (v36) and Safari (v6.1.4) (i.e. the gradient gets applied to the image and both are rendered in the background) but not in Firefox (v31). I even tried using the moz prefix.

Here's a fiddle, but it doesn't really demonstrate the issue since jsfiddle does away with the html and body tags: http://jsfiddle.net/marvery/3z327/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Son of the Wai-Pan
  • 12,371
  • 16
  • 46
  • 55
  • possible duplicate of [CSS3 Transparency + Gradient](http://stackoverflow.com/questions/2293910/css3-transparency-gradient) – apaul Aug 05 '14 at 16:36
  • This may not be an exact duplicate, but you can find the info you're looking for there. – apaul Aug 05 '14 at 16:37
  • The html and body elements are always there regardless of whether the tags are specified or "removed", so you don't have to worry about that. – BoltClock Aug 05 '14 at 17:04

1 Answers1

2

Your page has no normal flow height, because all of body's children are divs, and all of these divs are being absolutely positioned, leaving no other content in the normal flow. The reset that you have imported zeroes out the margins on body. As a result, the height of html and body are both zero.

I'm not quite sure why or how Chrome and Safari would render the gradient, since I would actually expect a browser to not render the gradient since the gradient won't have any height, which is exactly what Firefox is doing. In fact, I can't get my Chrome to render the gradient like yours does — could this be yet another one of those differences between Chrome/Mac and Chrome/Win?

In any case, the solution is to give those elements some height so that the gradient has an area to be painted over. The problem is, since all of your divs are being positioned absolutely, there's no easy way to determine the content height of your page. If you want the gradient to stretch down the height of the content, you may unfortunately have to rethink your layout.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • I would quote the relevant parts of the spec to support my statement in the second paragraph, but there are several places I have to link to, which would make this answer pretty long. Not sure if I should put them in anyway. – BoltClock Aug 05 '14 at 17:19
  • You may be able to use JavaScript to determine the height of the content area in order to set the appropriate style, [but apparently there are cross-browser issues with that](http://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript), and you may not even always get a precise value. Personally, I don't think it's worth the hassle. – BoltClock Aug 05 '14 at 17:25
  • Thanks @BoltClock! This makes a lot of sense and helps inform me of other problems I was having (i.e. the last div's rendering was overflowing outside of the bounds of the background image...) – Son of the Wai-Pan Aug 07 '14 at 03:25