CSS3 Background-size Не работает, но ВИДИМ в Firebug - Firefox 3.6

Question

Я использую новую спецификацию CSS3 "background-size", чтобы получить фоновое изображение, немного превышающее размер страницы. Он отлично работает в webkit (Chrome & Safari), но свойство "-moz-background-size" вообще не работает в Firefox. Необычная вещь, если вы просматриваете сайт в режиме реального времени, свойство "-moz-background-size" IS отображается при просмотре сайта с помощью Firebug! Документы FF говорят, что он поддерживается с версии 3.6, и я использую 3.6.

Вот мой код:

@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%;
}
}

Есть предложения по отладке?

EDIT Теперь я в замешательстве ... QuirksMode.org сообщает о «белом» поле, а не красном или зеленом, чтобы указать совместимость css3 с размером фона в процентах в Firefox 3.6 :( http://www.quirksmode.org/css/background.html

Answer 1

Сегодня утром я столкнулся с той же проблемой, и для меня она решила, что изображение должно быть указано перед свойством background-size. Это работало в одном случае, а не в другом. Зачем? Порядок свойств CSS. Попробуй это.

</p>

<pre><code>.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;
</code>

Answer 2

Это оказалось ошибкой CSS с моей стороны, у меня было

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

позже по странице, которая как-то перекрывала Firefox "-moz-background-size: 130%".Так что, если у вас возникли проблемы, дайте

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

вашему CSS в Firefox, и это может решить проблему.

Answer 3

Ваша страница выглядит так же для меня в Firefox 3.6, Firefox 4.0 и Chrome, но я не вижу ни одной background-size ни в одной из них? У вас есть ссылка на страницу, которая фактически демонстрирует проблему?

Моим первоначальным предложением было бы указать ширину и высоту и посмотреть, работает ли это:

-moz-background-size: 130% 130%;

Answer 4

Измените свой CSS фон с

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

до

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

Answer 5

Мне написано: background-size: 100% 100%, авто;И все работают