Главная CSS-верстка

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

В статье используется изображение из примера к статье How to: CSS Large Background. Рассмотрим такую ситуацию - нужно создать страницу фиксированной ширины, к примеру, 900 пикселей, с контентом, расположенным горизонтально по центру относительно окна браузера. И необходимо на этой странице поместить большой фон (тоже горизонтально ...

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

  1. Хороший туториал, я как раз сейчас делаю тему для блога, делаю ее уже неделю

  2. во втором примере (для исправления глюка со смещением) можно вместо min-width добавить
    body {

    width: 100%;
    display: table;
    }

  3. в первом случае тоже нормально работает. Opera v.10, IE 8, Мозилла 3. ты точно ту ссылку указал?

  4. Посмотрел пример 1 в опере ИЕ 6,7, мазиле 3 и не понял куда смещается фон. Изобр. для меню как были над wrapper, так и остались. Что я не до понимаю?

  5. не знал, потому что не надо было. а так то неплохая фишка.

  6. Хорошая техника.

    Я вообще в последнее время очень активно пользую min-width — чтобы точнее определять блоки.
    В результате мне реально проще стало верстать под все браузеры (ну, еще с использованием reset. css, конечно)

    :)

  7. Наоборот плюс одни дополнительный блок, а ты говоришь «минус лишний блок».

    У меня: 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-контейнер какими либо стилями, как показывает твой первый пример, это может привести к не очевиным в дальнешем последствиям.
      В любом случае, трюк имеет право на жизнь :)

  8. Всем советую взять на заметку. Полезно. Спс)

  9. Большое спасибо за статью. Отлично. А говорите «не о чем стало писать».

    Магическим образом в IE6 фон выравнивается нормально. Это просто-таки подарок от Microsoft. Видимо они специально это сделали в знак извинения и примирения из-за неподдержки min-width.

    А Вы изящным образом воспользовались min-width для других браузеров. Запомнил этот подход.

    • А говорите «не о чем стало писать».

      2 статьи в месяц — это совсем не говорит о том, что есть о чем писать.

      Видимо они специально это сделали в знак извинения и примирения из-за неподдержки min-width.

      Да они, наверное, и сами не знали, что их браузер такое умеет (шучу) =))) Кстати, периодически попадаются случаи, когда что-то работает в ИЕ на ура, а в других браузерах не лады.

      P. S. Не нужно ко мне на «Вы»!

  10. Dimox, можно так же html задать фиксированную ширину и автоматические поля. Фон, вопреки ожиданиям, не обрежется.

    Из комментариев понял, что не всем ясно, почему фон уезжает. Попробую объяснить. Дело в том, что фон, задаваемый html или body, браузер считает фоном всего окна и позиционирует в зависимости от его размеров. А так как ширина html не указана явно, браузер рассчитывает позицию фона исходя из ширины видимой области окна.

    Подробнее читайте в статье webstandards.org.ru/blog/layout/css-template.html (часть «Фон документа»).

  11. В мозиле 3.5 разницы не видно

  12. попробовал оба примера в мозиле 3.5, в опере 10, в ИЕ 8, в хроме 3 и в сафари 4 — НИГДЕ разницы не увидел… при изменении размеров окна фон одинаково двигается в обоих примерах — уезжает влево за край окна, но относительно враппера никуда не двигается

  13. Евгений Григорьев
    14 лет 4 месяца назад

    Что-то я тоже никакой разницы не увидел.

  14. Спасибо, полезная статья. Вчера как раз столкнулся к такой же проблемой.

  15. Спасибо, я только в процессе изучения верстки в CSS, полезный прием.

  16. А если большое изображение в качестве фона у меня не в header’e, а блоком ниже?

    Пример кода:

    <body>
       <div class="wrapper">
          <div class="header">
          </div>
          <div class="promo">
          </div>
          <div class="container">
          </div>
          <div class="footer">
          </div>
       </div>
    </body>
    

    Нужно вставить два больших изображения фоном в «promo» и «footer». Как быть?

  17. Реальное, человеческое спасибо автору! ;)

  18. аааааа =))) ЭТО ОНО!!! Делаю свой первый сайт textile.in.ua — и при сужении браузера текст вылазил за бэкграунд… два дня копал интернет, менял наугад все таблицы))
    А всё решила одна строчка min-width: 900px; СПАСИБО огромное) ;)

  19. Большое спасибо!!!

  20. Автору ОГРОМНЕЙШЕЕ СПАСИБО!!!

    Мучалась два дня, только ваш пост помог!!!

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