Geek Answers Handbook

CSS3 Background Size Doesn't Work, but VISIBLE in Firebug - Firefox 3.6

I use the new CSS3 specification "background-size" to have a background image that slightly overflows the page size. It works fine in webkit (Chrome and Safari), but the -moz-background-size property doesn't work at all in Firefox. Unusually, if you are viewing the site live, the "-moz-background-size" IS property is displayed when viewing the site using Firebug! FF docs say it is supported with 3.6 and I am running 3.6.

Here is 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 debugging suggestions?

... QuirksMode.org "" , , css3 Firefox 3.6:( http://www.quirksmode.org/css/background.html

+5
5

CSS ,

body{
background:url() top center no-repeat;
}

, - Firefox -moz-background-size: 130%. , ,

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

CSS Firefox, .

+2

, , . , . ? CSS. .

 .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;

+21
 
, Firefox 3.6, Firefox 4.0 Chrome, background-size ? , ?
, , :
-moz-background-size: 130% 130%;

+1
 
Change your CSS background from
background:url(../imgs/logo-x2-retina.png) no-repeat;

to
background-image:url(../imgs/logo-x2-retina.png);

0
 
source

I write: background-size: 100% 100%, auto; And everyone works
-1
 
source

More articles:

All Articles