Проблема со 100% оберткой фонового изображения при прокрутке

У меня есть http://www.mrfishermusic.com/

Вы заметите, что основной оберткой является 1042px (#main). Тогда у меня есть #container, окружающий то, что является шириной 100%. Я сделал это так, потому что фоновое изображение страницы огромно по ширине.

Проблема заключается в том, что если браузер имеет небольшой размер по горизонтали... скажем, примерно.. шириной 700 пикселей (или намного меньше, как на iPhone), при прокрутке вправо верхний и нижний колонтитулы просто исчезают, хотя оболочка #main остается неповрежденными.

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

Спасибо!

Источник

2 ответа

Решение

Размер контейнера в 100% относится к области просмотра и не обновляется при прокрутке / изменении размера. У вас есть несколько вариантов:

  • использовать JavaScript для обработки изменений размера области просмотра
  • установить минимальный размер контейнера заголовка в пикселях
  • вместо этого установите фон для тела (потому что он не ограничен размером области просмотра): background-image: url(background.png); background-position: center top;
Источник

Настройка min-width на <body> может решить эту проблему, также.

Источник
Другие вопросы по тегам