Исправлена ​​фоновая работа в Chrome, но не в Firefox?

Я что-то упускаю?

body {
   margin: 0 auto;
   padding: 0;
   font-family: helvetica, sans-serif, Arial;
   color: #333333;
   font-size: 13px;
   background: white url(images/bg.jpg) no-repeat fixed top center;
}

person Tara    schedule 25.05.2011    source источник
comment
что вам действительно нужно: фиксированное фоновое изображение в центре или движущееся фоновое изображение в центре   -  person sandeep    schedule 25.05.2011
comment
@sandeep Исправлено, как в Chrome   -  person Tara    schedule 25.05.2011
comment
Вы можете показать свой пример на jsbin.com?   -  person sandeep    schedule 25.05.2011
comment
@sandeep Вы можете увидеть сайт в моем профиле, если вам нужно. - Извините, я не думаю, что смогу использовать JSBin, потому что это сайт WordPress...   -  person Tara    schedule 25.05.2011


Ответы (3)


в SearchAndShare.css есть правило body {background-attachment: inherit;}, которое, поскольку этот лист вызывается позже, чем ваш основной лист, отменяет правило "fixed" из вашего основного листа.

удаление этого правила исправляет Firefox, не уверен, что inherit является допустимым вызовом для background-attachment, но даже если это так, это будет означать, что вам нужно установить background-attachment: fixed" on thehtmlelement so thebody`, чтобы что-то наследовать

Обновление: Да, если вы не хотите возиться с файлом плагина SearchAndShare.css, добавление html {background-attachment: fixed} на основной лист также исправит это.

person clairesuzy    schedule 09.06.2011
comment
Спасибо @clairesuzy! Теперь это исправлено. Удивительно. знак равно - person Tara; 06.07.2011

При использовании сокращенного свойства background порядок свойств должен быть

  1. цвет
  2. изображение
  3. повторение
  4. вложение
  5. должность

Попробуйте изменить стиль следующим образом (измените порядок repeat и добавьте attachment и посмотрите, будет ли это иметь значение:

background: white url(images/bg.jpg) no-repeat fixed center 0;

Затем удалите background-attachment:fixed;

РЕДАКТИРОВАТЬ: очевидно, что смешивание ключевых слов и значений приведет к тому, что некоторые браузеры задохнутся. Так что centre 0 может быть проблемой в FF.

Попробуйте 50% 50% или center center

person Jason Gennaro    schedule 25.05.2011
comment
@ Тара. Я увидел то, чего раньше не видел, и отредактировал ответ выше. К вашему сведению. - person Jason Gennaro; 06.06.2011
comment
Этот «фон: белый URL-адрес (images/bg.jpg) без повторов, фиксированный верхний центр;» работает лучше, чем «центр по центру» или «50% 50%», так как они размещают bg img в вертикальном центре страницы. Однако в firefox bg по-прежнему не залипает, как в Chrome. Спасибо за обновление в любом случае. - person Tara; 09.06.2011

Попробуйте использовать это

background: url(under.gif) no-repeat fixed 10% 20%;

or

width: 780px;
font-family: Arial;
font-size: 0.8em;
background: url(images/bg.jpg) top left repeat-y;
border: 1px solid #e6930f

Надеюсь, это поможет... :)

person harishtps    schedule 25.05.2011
comment
Извините @harishtps, но этот CSS действительно не работает, и я не знаю, почему вы почувствовали необходимость добавить оранжевую рамку, другое фоновое изображение и размер шрифта? - person Tara; 25.05.2011