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

Question

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 */
body{
    -o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;
    background-size: 130%;
}
#trans_fake{
    -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

Answer 1

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;
  width:323px;
  margin-left: 10px;
  background:url(../imgs/logo-x2-retina.png) no-repeat;
  -o-background-size: 100%;
  -moz-background-size: 100% auto;
  -webkit-background-size:100%;
  background-size: 100%;
  margin: 0 auto;

Answer 2

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

body{
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

body{
background-size: 130% !important;
}

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