CSS-трюк: фиксируем большой бэкграунд относительно контента
В статье используется изображение из примера к статье How to: CSS Large Background. Рассмотрим такую ситуацию - нужно создать страницу фиксированной ширины, к примеру, 900 пикселей, с контентом, расположенным горизонтально по центру относительно окна браузера. И необходимо на этой странице поместить большой фон (тоже горизонтально .
Смотрите также
- CSS-трюк: двойные бордюры-разделители вертикального меню 28 комментариев
- CSS-трюк: IE, таблица и «резиновые» изображения 33 комментария
- Верстка красивых тегов для сайта + бонус 25 комментариев
- Зеленый свет CSS-свойствам при верстке под IE8 и выше 26 комментариев
Комментарии (60)
Хороший туториал, я как раз сейчас делаю тему для блога, делаю ее уже неделю
во втором примере (для исправления глюка со смещением) можно вместо min-width добавить body
Это работает не во всех браузерах.
в первом случае тоже нормально работает. 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
Разницу видите? У вас разве не так? =)
Странно, я этого не наблюдаю….
Да блин, съезжает фон влево при уменьшении окна! Люди, вы чего?
Посмотрел пример 1 в опере ИЕ 6,7, мазиле 3 и не понял куда смещается фон. Изобр. для меню как были над wrapper, так и остались. Что я не до понимаю?
Да я вроде доходчиво написал. Сужать окно браузера пробовали?
не знал, потому что не надо было. а так то неплохая фишка.
Я вообще в последнее время очень активно пользую min-width — чтобы точнее определять блоки. В результате мне реально проще стало верстать под все браузеры (ну, еще с использованием reset.css, конечно)
Проще верстать под все браузеры? Да, особенно если помнить тот факт, что min-width в дурачком нашим (IE6) не поддерживается, зараза.
Наоборот плюс одни дополнительный блок, а ты говоришь «минус лишний блок».
У меня: html, body, #wrapper — 3 блока.
У тебя: html, body, #wrapper, .main — 4 блока. И в чем смысл?
И опять же = стараюсь обходится без wrapper’ов. Потому что структура же должна быть простой, и не обязательно в ущерб дизайну
(Хотя тут встречная вещь — стандарты. Вот не согласован OpenID с HTML5 и что ту поделать, даже пока не могу ума приложить… Может быть есть идеи у кого?)
И опять же = стараюсь обходится без wrapper’ов.
И каким образом ты без них обходишься?
Ну, не совсем так, чтобы совсем уж без wrapper’ов. Просто я полагаю, что не обязательно все-все-все заключать в один блок, чтобы его было проще стилизовать.
Знаешь, как делают? html>body>div.wrapper и дальше уже все пошло? Я так не люблю — у меня уже есть один большой блок — body, вот с ним и надо работать.
С другой стороны, я не профессионал, так что это лично мое мнение… Тем более что зависит много еще от того, что у нас за диз и какие задачи он ставит
:) Охринеть, один большой блок . Ну так расскажите, как Вы с ним одним работаете?
Dimox, учитесь! Вот человек верстает одним только и все тут.
Знаешь, как делают? html>body>div.wrapper и дальше уже все пошло? Я так не люблю – у меня уже есть один большой блок – body, вот с ним и надо работать.
Если есть возможность, то я вместо #wrapper использую body, тогда получается минус один контейнер, что есть хорошо. Но когда верстаешь не себе, то лучше не рисковать — заказчик на сайте может использовать какой-нибудь скрипт типа jQuery Lightbox и увидит совсем не то, что ожидал.
Тем более что зависит много еще от того, что у нас за диз и какие задачи он ставит
Вот, в этом и суть.
P.S. А вообще-то статья не о том, много тегов использовать, или нет, так что это все разговоры не по теме.
(Хотя тут встречная вещь – стандарты. Вот не согласован OpenID с HTML5 и что ту поделать, даже пока не могу ума приложить… Может быть есть идеи у кого?
Это Вы выругались что ли? Ничего не понял.
Представляете! HTML с PHP тоже не согласован. А еще PHP и MySQL разные. Ума не приложе, что же делать. Есть у кого-то идеи?
Красиво сказано, да, красиво.
А теперь глянь на валидатор — и тебе сразу станет понятно, о чем я говорил: validator.w3.org
Видишь три ошибки? Две их них — из-за того, что HTML5 не принимает content-type, который требуется для OpenID.
Я понимаю, что это не по теме, но может быть таки кто-то знает, как обойти? Очень люблю валидный код1
Я тоже валидный код люблю (кто же его не любит), но иногда приходится забивать на валидатор, жаль только, что частенько :)