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

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

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

  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. Трюк хорош :)
    Но, нет объяснений почему такое происходит в “крутых” браузерах :)

    Если вместо 50% задать какое-то заначение в пикселях все в норме, но тогда на разных разрешениях происходит смещение фоновой картинки.
    Решая подобные проблемы, всегда делаю так
    Минус лишний блок, но везде работает.

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

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

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

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

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

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

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

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

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

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

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

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

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

      P.S. Не нужно ко мне на “Вы”!

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

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

  12. Евгений Григорьев
    11 лет -1 месяц назад

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

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

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

  15. Дмитрий
    10 лет назад

    А если большое изображение в качестве фона у меня не в 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”. Как быть?

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

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

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

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

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

  20. Очень нужна помощь пожалуйста, создал фоновую картинку под мню с position: fixed;
    и вот когда сужаю окно браузера фоновая картинка уезжает влево
    что делать не представляю помогите
    тест сайт

    • Попробуйте фиксированный блок сделать на всю ширину браузера и без фона, а в него уже вставить блок с position: absolute, у которого будет фон.

      • я извиняюсь
        могли бы вы помочь с написанием кода
        я мягко говоря со знаниями (в предбаннике)
        Могу дать доступ к админке.
        Я вот попробовал этот фон прикрутить к меню, что то получилось
        в лево не уходит.
        Но теперь не могу позиционировать этот фон.
        Такую фишку увидел здесь
        Но не могу повторить код.
        Буду очень благодарен.

          • С примером визуально понятно, не понятно как на моем сайте это реализовать.
            Давайте так, я покажу как я прописываю, а Вы подскажите что не так.
            HTML

            <div class="bg_sotto_menu1"><img src="http://test-avm.orgfree.com/images/header-bg4.png" width=931 height=147"/></a></div>

            CSS

            .bg_sotto_menu1 {
                position: fixed;     
                background-attachment: scroll;    
                background-clip: border-box;
                background-color: transparent;
                background-repeat: no-repeat;
                background-size: auto auto;
                background-origin: padding-box;
                left: 166px;
                top: -8px;
                z-index: 1007;
            }

            Я не могу понять как правильно прописать фиксированный блок на всю ширину браузера и без фона, а в него уже вставить блок с position: absolute, у которого будет фон.

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