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% задать какое-то заначение в пикселях все в норме, но тогда на разных разрешениях происходит смещение фоновой картинки.
    Решая подобные проблемы, всегда делаю так
    Минус лишний блок, но везде работает.

  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;
    и вот когда сужаю окно браузера фоновая картинка уезжает влево
    что делать не представляю помогите
    тест сайт

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