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 и попробуйте сузить окно браузера - фон больше никуда не съезжает, чего нам и требовалось добиться.
Хороший туториал, я как раз сейчас делаю тему для блога, делаю ее уже неделю
во втором примере (для исправления глюка со смещением) можно вместо min-width добавить
body {
…..
width: 100%;
display: table;
}
Это работает не во всех браузерах.
Посмотрел пример 1 в опере ИЕ 6,7, мазиле 3 и не понял куда смещается фон. Изобр. для меню как были над wrapper, так и остались. Что я не до понимаю?
не знал, потому что не надо было. а так то неплохая фишка.
Да я вроде доходчиво написал. Сужать окно браузера пробовали?
в первом случае тоже нормально работает. Opera v.10, IE 8, Мозилла 3. ты точно ту ссылку указал ?
Я что-то тоже разницы не наблюдаю в FF3, даже в Opera 9.27 не наблюдаю.
Я все правильно, указал. Тестировал в следующих браузерах: Opera 9.27, Opera 9.64, Opera 10, Internet Explorer 8, FireFox 3, Chrome, Safari. Везде именно так, как я написал в статье.
Может вы просто не понимаете, о чем я говорю?
Вот скриншоты, сделанные в Опере 10:
1-й пример - http://s08.radikal.ru/i181/0910/48/658de4af25a3.png
2-й пример - http://s14.radikal.ru/i187/0910/07/1bc935516344.png
Разницу видите? У вас разве не так? =)
мм в первом примере бэкграун должен съезжать влево при масштабировании?
Не при масштабировании, а при сужении окна.
Странно, я этого не наблюдаю….
Хорошая техника.
Я вообще в последнее время очень активно пользую min-width - чтобы точнее определять блоки.
В результате мне реально проще стало верстать под все браузеры (ну, еще с использованием reset.css, конечно)
:)
Трюк хорош :)
Но, нет объяснений почему такое происходит в “крутых” браузерах :)
Если вместо 50% задать какое-то заначение в пикселях все в норме, но тогда на разных разрешениях происходит смещение фоновой картинки.
Решая подобные проблемы, всегда делаю так
Минус лишний блок, но везде работает.
Наоборот плюс одни дополнительный блок, а ты говоришь “минус лишний блок”.
У меня: html, body, #wrapper - 3 блока.
У тебя: html, body, #wrapper, .main - 4 блока. И в чем смысл?
И опять же = стараюсь обходится без wrapper’ов.
Потому что структура же должна быть простой, и не обязательно в ущерб дизайну
(Хотя тут встречная вещь - стандарты. Вот не согласован OpenID с HTML5 и что ту поделать, даже пока не могу ума приложить… Может быть есть идеи у кого?)
И каким образом ты без них обходишься?
Читать надо так - минус мной предлагаемого это лишний блок-контейнер :)
Но в данном случае мы не нагружаем html-контейнер какими либо стилями, как показывает твой первый пример, это может привести к не очевиным в дальнешем последствиям.
В любом случае, трюк имеет право на жизнь :)
Ну, не совсем так, чтобы совсем уж без wrapper’ов. Просто я полагаю, что не обязательно все-все-все заключать в один блок, чтобы его было проще стилизовать.
Знаешь, как делают? html>body>div.wrapper и дальше уже все пошло? Я так не люблю - у меня уже есть один большой блок - body, вот с ним и надо работать.
С другой стороны, я не профессионал, так что это лично мое мнение… Тем более что зависит много еще от того, что у нас за диз и какие задачи он ставит
Согласен…
Всем советую взять на заметку.. Полезно. Спс)
Да блин, съезжает фон влево при уменьшении окна! Люди, вы чего?
Проще верстать под все браузеры? Да, особенно если помнить тот факт, что min-width в дурачком нашим (IE6) не поддерживается, зараза.
:) Охринеть, один большой блок . Ну так расскажите, как Вы с ним одним работаете?
Dimox, учитесь! Вот человек верстает одним только и все тут.
Это Вы выругались что ли? Ничего не понял.
Представляете! HTML с PHP тоже не согласован. А еще PHP и MySQL разные. Ума не приложе, что же делать. Есть у кого-то идеи?
Большое спасибо за статью. Отлично. А говорите “не о чем стало писать”.
Магическим образом в IE6 фон выравнивается нормально. Это просто-таки подарок от Microsoft. Видимо они специально это сделали в знак извинения и примирения из-за неподдержки min-width.
А Вы изящным образом воспользовались min-width для других браузеров. Запомнил этот подход.
Если есть возможность, то я вместо #wrapper использую body, тогда получается минус один контейнер, что есть хорошо. Но когда верстаешь не себе, то лучше не рисковать - заказчик на сайте может использовать какой-нибудь скрипт типа jQuery Lightbox и увидит совсем не то, что ожидал.
Вот, в этом и суть.
P.S. А вообще-то статья не о том, много тегов использовать, или нет, так что это все разговоры не по теме.
2 статьи в месяц - это совсем не говорит о том, что есть о чем писать.
Да они, наверное, и сами не знали, что их браузер такое умеет (шучу) =))) Кстати, периодически попадаются случаи, когда что-то работает в ИЕ на ура, а в других браузерах не лады.
P.S. Не нужно ко мне на “Вы”!
Это и есть масштабирование…
Уменьшение, увеличения масштаба…
Красиво сказано, да, красиво.
А теперь глянь на валидатор - и тебе сразу станет понятно, о чем я говорил:
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, полезный прием.