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 suppor开发者_运维技巧ted as of 3.6 and I'm running 3.6.
The production version of the site: http://anasmadance.com.s66112.gridserver.com/
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?
I quickly tried to add the !important
directive via firebug and it seems to work:
-moz-background-size: 130% auto !important;
But I can't understand what is overriding. I found you placed the -moz specific vendor propriety after the standard one, try to invert this. Just a guess.
精彩评论