центрируйте фоновое изображение на div, который имеет минимальную ширину, даже когда страница является более насыщенной, чем div

HTML

<div id="outer">
  <div id="inner">
    Lorem Ipsum...
  </div>
</div>

CSS

#outer { background: url('mypic.jpg') no-repeat center top; }
#inner { width: 960px; margin: 10px auto; }

Этот код хорошо фокусируется на моем фоновом изображении, кроме , когда мой браузер становится более узким, чем 960px ширина #inner. В этом случае с узким браузером #inner и #outer поддерживают свою ширину 960 пикселей, как и ожидалось (с горизонтальной полосой прокрутки браузера), но фоновое изображение на #outer центрируется непосредственно в окне браузера вместо #outer div. Как сохранить фоновое изображение в центре div, а не в окне браузера?

1
Например, обратите внимание, как изображение остается на экране, даже если внешний div отключается с правой стороны экрана. jsfiddle.net/5Kn7s
добавлено автор mrtsherman, источник
На самом деле это действительно странно - jsfiddle.net/5Kn7s/1 Обратите внимание на красную рамку. Внешний div не растет вместе с его дочерним контейнером ??? Вот почему изображение остается на экране.
добавлено автор mrtsherman, источник

1 ответы

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

#outer { min-width: 960px; }

http://jsfiddle.net/5Kn7s/3/

Хорошо, это тоже работает, но не поддерживается IE7 или IE6

#outer { display: table-cell; }

http://jsfiddle.net/5Kn7s/4/

Это очень странное поведение, но, судя по всему, если у вас есть div без указанной ширины, и даже если ребенок шире родительского, родительский экран становится настолько же широким, как и экран.

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)