CSS: Исправлено фокусное вложение не будет масштабироваться до границ элемента.

Question

Я никогда не сталкивался с проблемой CSS, я не мог понять, но я просто озадачен этим. У меня есть элемент, в котором я хотел бы иметь фиксированное фоновое изображение, и я намеренно использую изображение, которое намного больше, чем элемент, потому что я не использую медиа-запросы для этого конкретного проекта, а просто хочу чтобы шкала изображения была равна ширине элемента. По некоторым причинам, однако, когда я переключаюсь фоновое приложение к фиксированным, изображение использует границы родительского элемента, как это точка отсчета.

Я использую фреймворк Foundation 4 (я использую его все время), и таким образом родительский элемент является классом row, поэтому стоит отметить, но я не могу понять, что может вызвать это проблема. Вот определение стиля, которое я использую (я разбил описание фона отдельно для устранения неполадок). Идеи, кто-нибудь?

#page-content { 
    min-height: $publicContentHeight; 
    background-color:rgba(255,255,255,0.25); 
    background-image: url('../img/paper_phren/pages.bg.fludd.png'); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    background-size:contain; 
    background-attachment: fixed; 
    box-shadow:0px -5px 10px rgba(0,0,0,.3); 
} 

Answer 1

Трудно сказать, не видя вашего прецедента, но я обнаружил, что background-size не подходит для масштабирования изображения в соответствии с шириной любого размера экрана, не переполняя его контейнер. Что больше всего похоже, и что я сейчас принял, просто использует элемент img для фона. Да, это не так семантически точно, но контроль, который вы получаете, не стоит того. Microsoft.com и многие другие используют это для масштабируемых фоновых изображений.

Answer 2

Вы пытаетесь заполнить элемент и, следовательно, не возражаете, если фоновое изображение масштабируется вне элемента на любой высоте или ширине в зависимости от соотношения? Если да, попробуйте: размер фона: обложка;

Answer 3

Фонд + офсетная полоса + хром + фон-приложение: fixed = проблема. Или так я слышал ....

http://foundation.zurb.com/forum/posts/1799-an-off-canvas-story «1- Только в хроме для окна (или так сказать, интернет): фон-вложения: фиксированные ведут себя странно с анимацией Специально если вы заключаете Самости анимированного offcanvas вокруг всех. ваши фиксированные задние части. Примечание: это не имеет ничего общего с Zurb, но с хромом ».