4

I'm quite simply trying to achieve a body background image that always in its entirety fills the browser window (aspect ratio doesn't matter).

The standard css code

 body{
     background-image: url('test.jpg');
     background-size: 100% 100%;
 }

seems to work fine in almost all modern major browsers, including Firefox 45. But in the newest Firefox, 52, the background-image gets clipped to a very narrow band in the vertical direction, which is then repeated until it fills the window. Am I using some deprecated code I'm not aware of, or is this a Firefox bug?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Kim Fierens
  • 169
  • 6
  • 2
    Firefox 49 and later also implement this property prefixed with -webkit. – Mark Schultheiss Apr 08 '17 at 16:40
  • 2
    @Mark Schultheiss: That's just to support sites that were designed solely for WebKit for no real reason and therefore omit the unprefixed background-size property. background-size has been supported unprefixed by Firefox for many, many years. Authors are supposed to work under the assumption that Firefox *doesn't* support -webkit-background-size, because in an ideal world it has no reason to. – BoltClock Apr 08 '17 at 16:43
  • 1
    Yes, note the "also implement" in there. – Mark Schultheiss Apr 08 '17 at 16:50

3 Answers3

4

From the spec's definition for background-size:

A percentage is relative to the background positioning area.

And from section 3.11.1 (emphasis mine):

3.11.1. The Canvas Background and the Root Element

The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas. However, any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) The root element does not paint this background again, i.e., the used value of its background is transparent.

You're applying the background to body, but that makes no difference; section 3.11.2 simply says "the propagated values are treated as if they were specified on the root element."

So it looks like Firefox has simply updated its behavior to be more standards-compliant (I don't know if a Bugzilla ticket exists for this; I haven't been able to find one). The background positioning area of the root element in an empty HTML document in standards mode should be zero, since the height of the root element in such a document should be zero, meaning percentage values of background-size should resolve to zero. Firefox 52 still appears to enforce an 8-pixel minimum height on the root element for some reason, resulting in the very narrow band that you see with background-size: 100% 100%, but I guess that is a separate issue.

So basically this means in order for background-size: 100% to work on either html or body, you need to specify 100% height for the root element, in a similar vein to my answer to height: 100% or min-height: 100% for html and body elements? (except the min-height on body is not necessary since you're only applying a single background, to the body element alone, which is subject to the propagating behavior described in §3.11.2)

Or you can choose to apply min-height: 100vh to the body element instead as Michael Coker demonstrates, but that's assuming you're going to remove the default margins while you're at it.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
1

The second value in background-size is the height. Set a height on body or add some content and it works fine.

body {
  background: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg');
  background-size: 100% 100%;
  min-height: 100vh;
}
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
1

Try this:

background: url(test.jpg) no-repeat;
background-size: cover;
background-position: 100%;

Hope this works.

Cameron
  • 1,049
  • 12
  • 24