W3C home > Mailing lists > Public > www-style@w3.org > September 2010

Re: [css3-background] background-size: cover scaling

From: L. David Baron <dbaron@dbaron.org>
Date: Sat, 18 Sep 2010 08:43:43 -0700
To: Mark Nottingham <mnot@mnot.net>
Cc: www-style@w3.org
Message-ID: <20100918154343.GA4740@pickering.dbaron.org>
On Saturday 2010-09-18 20:24 +1000, Mark Nottingham wrote:
> I've noticed that in two implementations*, at least, background-size: cover doesn't appear to operate as one would expect.
> My case:
>   http://www.mnot.net/
> ... where a background image is attached to the body and sized to 'cover'.
> Here, the image appears to cover well and scale appropriately with "normal" browser window sizes, but when one sizes the window to be reasonably narrow yet tall, a white bar appears at the bottom; i.e., it does not truly cover the box.
> Is this working as specified, or are there bugs in the implementations?
> Kind regards,
> * Firefox, as well as Safari and Chrome; all most recent releases

I think this is working as specified.  In particular, see the
entirety of section 3.11 (The backgrounds of special elements):
http://www.w3.org/TR/css3-background/#special-backgrounds , which
says in the first paragraph that the background of the root element
is displayed on the canvas, but sized and positioned as for the root
element, and which says in the second paragraph that the background
of body is propagated to the root in some cases.

I think your problem could probably be solved with something like:
  html { min-height: 100% }
  body { margin: 0; padding: /* replace any margin value you cared about */ }


L. David Baron                                 http://dbaron.org/
Mozilla Corporation                       http://www.mozilla.com/
Received on Saturday, 18 September 2010 15:44:14 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:49:47 UTC