CSS-трюк: фиксируем большой бэкграунд относительно контента
В статье используется изображение из примера к статье How to: CSS Large Background.
Рассмотрим такую ситуацию - нужно создать страницу фиксированной ширины, к примеру, 900 пикселей, с контентом, расположенным горизонтально по центру относительно окна браузера. И необходимо на этой странице поместить большой фон (тоже горизонтально по центру), ширина которого значительно больше ширины нашего отцентрированного блока с контентом.
Фон размещается элементарно - его мы прицепляем тегу <body> и центрируем горизонтально.
При этом имеем следующую структуру кода:
HTML:
1 2 3 4 5 6 7 | <html> <body> <div id="wrapper">контент</div> </body> </html> |
CSS:
1 2 3 4 5 6 7 | body { background: url(background.jpg) 50% 0 no-repeat; } #wrapper { width: 900px; margin: 0 auto; } |
Для наглядности посмотрим пример №1.
Если вы станете сужать окно браузера, то с того момента, когда появится горизонтальная прокрутка, вы заметите, что фоновое изображение сдвигается влево относительно контента (за исключением браузеров IE6 и IE7). Наша задача - зафиксировать изображение.
Данную неприятность позволяет устранить один очень простой трюк. Суть его заключается в том, что к родительскому блоку контейнера, у которого задан фон, необходимо применить параметр минимальной ширины, равной ширине контентного блока. В нашем случае мы укажем минимальную ширину тегу <html>, поскольку он является “родителем” тега <body>, к которому мы прицепили фон. Т.е. всего-навсего добавляем такой стиль:
1 2 3 | html { min-width: 900px; } |
Вот и все. Теперь посмотрите пример №2 и попробуйте сузить окно браузера - фон больше никуда не съезжает, чего нам и требовалось добиться.
Это и есть масштабирование…
Уменьшение, увеличения масштаба…
Красиво сказано, да, красиво.
А теперь глянь на валидатор - и тебе сразу станет понятно, о чем я говорил:
validator.w3.org
Видишь три ошибки?
Две их них - из-за того, что HTML5 не принимает content-type, который требуется для OpenID.
Я понимаю, что это не по теме, но может быть таки кто-то знает, как обойти? Очень люблю валидный код1
Я тоже валидный код люблю (кто же его не любит), но иногда приходится забивать на валидатор, жаль только, что частенько :)
Мы реально ушли от темы..!
Вы путаете масштабирование окна с масштабированием контента.
Dimox, можно так же html задать фиксированную ширину и автоматические поля. Фон, вопреки ожиданиям, не обрежется.
Из комментариев понял, что не всем ясно, почему фон уезжает. Попробую объяснить. Дело в том, что фон, задаваемый html или body, браузер считает фоном всего окна и позиционирует в зависимости от его размеров. А так как ширина html не указана явно, браузер рассчитывает позицию фона исходя из ширины видимой области окна.
Подробнее читайте в статье http://webstandards.org.ru/blog/layout/css-template.html (часть “Фон документа”).
Интересная особенность. Не знал этого. Спасибо за комментарий!
В мозиле 3.5 разницы не видно
попробовал оба примера в мозиле 3.5, в опере 10, в ИЕ 8, в хроме 3 и в сафари 4 - НИГДЕ разницы не увидел… при изменении размеров окна фон одинаково двигается в обоих примерах - уезжает влево за край окна, но относительно враппера никуда не двигается
Все верно пишет dimox. Первый вариант уезжает - второй решает проблему.
А то раньше все обворачивал еще одним контейнером. Спасибо за decision! ;)
2ioni: Уже четыре ошибки ;)
Что-то я тоже никакой разницы не увидел.
Спасибо, полезная статья. Вчера как раз столкнулся к такой же проблемой.
Спасибо, я только в процессе изучения верстки в CSS, полезный прием.
А если большое изображение в качестве фона у меня не в header’e, а блоком ниже?
Пример кода:
2
3
4
5
6
7
8
9
10
11
12
<div class="wrapper">
<div class="header">
</div>
<div class="promo">
</div>
<div class="container">
</div>
<div class="footer">
</div>
</div>
</body>
Нужно вставить два больших изображения фоном в “promo” и “footer”. Как быть?
Реальное, человеческое спасибо автору! ;)
аааааа =))) ЭТО ОНО!!!! Делаю свой первый сайт textile.in.ua - и при сужении браузера текст вылазил за бэкграунд… два дня копал интернет, менял наугад все таблицы))
А всё решила одна строчка min-width: 900px; СПАСИБО огромное) ;)