CSS-трюк: фиксируем большой бэкграунд относительно контента

В статье используется изображение из примера к статье How to: CSS Large Background.

Рассмотрим такую ситуацию – нужно создать страницу фиксированной ширины, к примеру, 900 пикселей, с контентом, расположенным горизонтально по центру относительно окна браузера. И необходимо на этой странице поместить большой фон (тоже горизонтально по центру), ширина которого значительно больше ширины нашего отцентрированного блока с контентом.

Фон размещается элементарно – его мы прицепляем тегу <body> и центрируем горизонтально.

При этом имеем следующую структуру кода:

HTML:


<html>
<body>

<div id="wrapper">контент</div>

</body>
</html>

CSS:


body {
	background: url(background.jpg) 50% 0 no-repeat;
}
#wrapper {
	width: 900px;
	margin: 0 auto;
}

Для наглядности посмотрим пример №1.

Если вы станете сужать окно браузера, то с того момента, когда появится горизонтальная прокрутка, вы заметите, что фоновое изображение сдвигается влево относительно контента (за исключением браузеров IE6 и IE7). Наша задача – зафиксировать изображение.

Данную неприятность позволяет устранить один очень простой трюк. Суть его заключается в том, что к родительскому блоку контейнера, у которого задан фон, необходимо применить параметр минимальной ширины, равной ширине контентного блока. В нашем случае мы укажем минимальную ширину тегу <html>, поскольку он является “родителем” тега <body>, к которому мы прицепили фон. Т.е. всего-навсего добавляем такой стиль:


html {
	min-width: 900px;
}

Вот и все. Теперь посмотрите пример №2 и попробуйте сузить окно браузера – фон больше никуда не съезжает, чего нам и требовалось добиться.

Комментарии (60)

  1. Очень нужна помощь пожалуйста, создал фоновую картинку под мню с position: fixed;
    и вот когда сужаю окно браузера фоновая картинка уезжает влево
    что делать не представляю помогите
    тест сайт

    • Попробуйте фиксированный блок сделать на всю ширину браузера и без фона, а в него уже вставить блок с position: absolute, у которого будет фон.

      • я извиняюсь
        могли бы вы помочь с написанием кода
        я мягко говоря со знаниями (в предбаннике)
        Могу дать доступ к админке.
        Я вот попробовал этот фон прикрутить к меню, что то получилось
        в лево не уходит.
        Но теперь не могу позиционировать этот фон.
        Такую фишку увидел здесь
        Но не могу повторить код.
        Буду очень благодарен.

  2. Все получилось СПАСИБО
    Еще вопрос может подскажите как прописать такую таблицу
    http://imgur.com/OUKKa

  3. Вот спасибо)
    на многих сайтах этот вопрос без ответа))
    Оказывается все просто.
    Раньше приходилось в дочернем блоке с фиксированной шириной дублировать фоновое изображение. Там оно не съезжало при изменении ширины экрана.

  4. Спасибо. Очень помогли. Два дня панель с ума сводила))) Тема в сети обсуждается…но конструктива мало. Спасибо за исчерпывающий ответ.

  5. Спасибо, очень помогли!

  6. И от меня большое спасибо!! Тоже спать спокойно не могла, меню-шка три дня с ума сводила…

  7. Димоксы! Вы просто реально лучшие. Я перерыл пол-интернета для решения этой вроде незамысловатой проблемы, но кроме вас вообще никто нормального ничего не написал! Добавляю ваш сайт в избранное, спасибо! Так держать!

  8. Прописал в код body { background-image: url(images/bg.jpg); /* Путь к фоновому изображению */ background-color: #c7b39b; /* Цвет фона */ } а толку ноль. Когда вместо body ставлю div? лишь тогда меняется фон на контенте , а мне нужен задний фон и ссылку на него поставить . Помогите!!! Мои сайты http://detskiy-konstruktor.com.ua/ и http://smartbetting.biz/

Ваш комментарий