CSS3 Background-size Not working but VISIBLE in Firebug - Firefox 3.6


I'm using the new CSS3 spec "background-size" to have a background image that slightly overflows the size of the page. It's working fine in webkit (Chrome & Safari) but the "-moz-background-size" property is not working at all in Firefox. The unusual thing is, if you view the site live, the "-moz-background-size" property IS showing when viewing the site with Firebug! The FF docs say that it is supported as of 3.6 and I'm running 3.6.

Here's my code:

@media screen and (max-width: 1150px) { 
/* special sytles for browser windows less than 1150px */
    -o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;
    background-size: 130%;
    -o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;  
    background-size: 130%;

Any debug suggestions?

EDIT I'm more confused now... QuirksMode.org is reporting a "white" box rather than red or green to indicate css3 background-size percentage-based compatibility in Firefox 3.6 :( http://www.quirksmode.org/css/background.html

Problem courtesy of: Brian


This turned out to be a CSS mistake on my part, I had a

background:url() top center no-repeat;

later down the page which was somehow overridding the Firefox "-moz-background-size: 130%". So, if you're having trouble, give

background-size: 130% !important;

to your CSS in Firefox and it might solve the problem.

Solution courtesy of: Brian


I am wrote: background-size: 100% 100%, auto; And all work

Discussion courtesy of: Arthur Yakovlev

Change your CSS background from

background:url(../imgs/logo-x2-retina.png) no-repeat;


Discussion courtesy of: Wildzart

I was running into the same issue this morning and what solved it for me was making sure the image was listed ahead of the background-size property. It was working in one instance and not in another. Why? The order of the CSS properties. Try this.

.front #logo {
  height: 58px;
  margin-left: 10px;
  background:url(../imgs/logo-x2-retina.png) no-repeat;
  -o-background-size: 100%;
  -moz-background-size: 100% auto;
  background-size: 100%;
  margin: 0 auto;

Discussion courtesy of: DShults

Your page looks the same to me in Firefox 3.6, Firefox 4.0 and Chrome, but I can't see any background-size in any of it? Do you have a link to a page that actually demonstrates the problem?

My initial suggestion would be to specify both width and height and see if that works:

-moz-background-size: 130% 130%;
Discussion courtesy of: robertc

This recipe can be found in it's original form on Stack Over Flow.