Проблема с background-attachment в Firefox

[me_alex]

Имеется div с прокруткой

overflow-y: scroll;

и фоном-картинкой.

чтобы фон прокручивался вместе с содержимым,

устанавливаю

background-attachment: local;

в опере, хроме и IE работает, в FF - нет.

Как быть с FF?

[Gaspode]

Да никак, наверно. Он не понимает это значение.

[me_alex]

Да никак, наверно. Он не понимает это значение.

Ясно, что не понимает )) - http://htmlbook.ru/css/background-attachment

Есть ли другая возможность заставить прокручиваться фон в FF ?

кроме как вложить div с img с абсолютным позиционированием и

выравниванием размеров по краям родительского div; размер img выходит за края родительского div ?

.background-container {
   position: absolute;
   overflow: hidden;
}


<div class = "parent">
   <div class = "background-container">
      <img class = "background" />
   </div>
</div>

Не хочется так извращаться

[SelenIT]

Зачем позиционирование? Просто обернуть прокручиваемый контент в обычный див с обычным фоном разве не решит проблему везде?

[me_alex]

Зачем позиционирование? Просто обернуть прокручиваемый контент в обычный див с обычным фоном разве не решит проблему везде?

?? Как при этом будет прокручиваться фон?

В приведенном примере контент располагается в parent, т.е. изображение в любом случае прокручивается, поскольку находится внутри контейнера, для которого установлена прокрутка.

более подробно, для ясности - так

parent {
   overflow-y: scroll;
}

background-container {
   position: absolute;
   overflow: hidden;
}

<div class = "parent">
   <div class = "background-container">
     <img class = "background" />     
   </div>
   <p>Контент</p>
</div>

или так

parent {
   overflow-y: scroll;
}

background-container {
   position: absolute;
   overflow: hidden;
}

<div class = "parent">
   <div class = "background-container">
     <img class = "background" />     
   </div>
   <div class = "content">
     <p>Контент</p>
   </div>
</div>

Фоновое изображение при этом приходится делать огромным, не меньше максимальных размеров parent, что само по себе очень плохо.

Если же использовать background-attachment, который не работает в Firefox, то это выглядит так:

parent {
   overflow-y: scroll;
   background: url('') repeat;
   background-attachment: local;
}

<div class = "parent">
     <p>Контент</p>
</div>

Может, я не понял идею или что-то упустил? Если есть альтернатива, покажите код, плиз!

[SelenIT]

Фоновое изображение при этом приходится делать огромным, не меньше максимальных размеров parent

Во имя Ктулху, зачем??? По описанию я понял, что вам нужно что-то типа этого, разве не так?

[me_alex]

SelenIT, спасибо!

это называется создать себе проблему на ровном месте ))