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

Thanks, David. 

I actually got away with it (I think) with just

html {
	min-height: 100%;
	background-image: url(bg.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
}

Sorry for not digging into this deeper first, and thanks again for the help.

Cheers,


On 19/09/2010, at 1:43 AM, L. David Baron wrote:

> 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 */ }
> 
> -David
> 
> -- 
> L. David Baron                                 http://dbaron.org/
> Mozilla Corporation                       http://www.mozilla.com/


--
Mark Nottingham     http://www.mnot.net/

Received on Sunday, 19 September 2010 00:04:08 UTC