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 и попробуйте сузить окно браузера — фон больше никуда не съезжает, чего нам и требовалось добиться.

Комментарии (61)
  1. 1
    Александр
    @

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

  2. 2
    Илья

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

  3. 3
    Александр

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

  4. 4
    Евгений

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

  5. 5
    Юля

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

  6. 6

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

  7. 7

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

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