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

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

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

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

  2. 2

    во втором примере (для исправления глюка со смещением) можно вместо min-width добавить
    body {
    …..
    width: 100%;
    display: table;
    }

  3. 5
    TimNet

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

  4. 15
    MOTORIST

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

  5. 17

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

  6. 18

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

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

    :)

  7. 20
    @

    Трюк хорош :)
    Но, нет объяснений почему такое происходит в «крутых» браузерах :)

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

    • 21

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

      У меня: html, body, #wrapper — 3 блока.

      У тебя: html, body, #wrapper, .main — 4 блока. И в чем смысл?

    • 33

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

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

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

  8. 35
    ramznet

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

  9. 36

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

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

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

    • 37

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

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

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

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

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

  10. 38

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

  11. 39
    sem
    @

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

  12. 41
    Евгений Григорьев

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

  13. 42
    AlexMay
    @

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

  14. 43

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

  15. 44
    Дмитрий

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

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

  17. 46
    Denis

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

  18. 47
    Андрей

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

  19. 48
    Евгения

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

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

  20. 49
    Александр
    @

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

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