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

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

60 комментариев

В статье используется изображение из примера к статье How to: CSS Large Background.

Рассмотрим такую ситуацию – нужно создать страницу фиксированной ширины, к примеру, 900 пикселей, с контентом, расположенным горизонтально по центру относительно окна браузера. И необходимо на этой странице поместить большой фон (тоже горизонтально по центру), ширина которого значительно больше ширины нашего отцентрированного блока с контентом.

Фон размещается элементарно – его мы прицепляем тегу <body> и центрируем горизонтально.

При этом имеем следующую структуру кода:

HTML:

<html>
<body>

<div id="wrapper">контент</div>

</body>
</html>

CSS:

body {
	background: url(background.jpg) 50% 0 no-repeat;
}
#wrapper {
	width: 900px;
	margin: 0 auto;
}

Для наглядности посмотрим пример №1.

Если вы станете сужать окно браузера, то с того момента, когда появится горизонтальная прокрутка, вы заметите, что фоновое изображение сдвигается влево относительно контента (за исключением браузеров IE6 и IE7). Наша задача – зафиксировать изображение.

Данную неприятность позволяет устранить один очень простой трюк. Суть его заключается в том, что к родительскому блоку контейнера, у которого задан фон, необходимо применить параметр минимальной ширины, равной ширине контентного блока. В нашем случае мы укажем минимальную ширину тегу <html>, поскольку он является “родителем” тега <body>, к которому мы прицепили фон. Т.е. всего-навсего добавляем такой стиль:

html {
	min-width: 900px;
}

Вот и все. Теперь посмотрите пример №2 и попробуйте сузить окно браузера – фон больше никуда не съезжает, чего нам и требовалось добиться.

Смотрите также

CSS-трюк: двойные бордюры-разделители вертикального меню

28 комментариев

Когда при верстке требуется создать меню с разделителем, я использую замечательную технику, которую когда-то давно предложил Юрий “akella” Артюх. Недавно я столкнулся с очень похожей, но более сложной задачей – ...

CSS-трюк: IE, таблица и "резиновые" изображения

33 комментария

Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился. Я с этим багом (да, речь пойдет об ...

Верстка красивых тегов для сайта + бонус

25 комментариев

Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...

Зеленый свет CSS-свойствам при верстке под IE8 и выше

26 комментариев

Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...

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

  1. Андрей Морковин
    22 октября 2009 г. в 13:09

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

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

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

    1. Dimox
      22 октября 2009 г. в 14:14 / ответ на коммент Андрей Морковин

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

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

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

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

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

  2. Максим
    22 октября 2009 г. в 23:35

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

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

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

    1. Dimox
      23 октября 2009 г. в 11:10 / ответ на коммент Максим

      Интересная особенность. Не знал этого. Спасибо за комментарий!

  3. Александр
    25 октября 2009 г. в 01:44

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

  4. sem
    29 октября 2009 г. в 17:53

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

    1. Samter
      31 октября 2009 г. в 13:42 / ответ на коммент sem

      Все верно пишет dimox. Первый вариант уезжает – второй решает проблему.
      А то раньше все обворачивал еще одним контейнером. Спасибо за decision! ;)
      2ioni: Уже четыре ошибки ;)

  5. Евгений Григорьев
    31 октября 2009 г. в 20:04

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

  6. AlexMay
    11 ноября 2009 г. в 16:31

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

  7. Virtual
    8 декабря 2009 г. в 17:23

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

  8. Дмитрий
    10 октября 2010 г. в 09:00

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

  9. Вячеслав
    16 января 2011 г. в 02:35

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

  10. Denis
    14 февраля 2011 г. в 10:31

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

  11. Андрей
    14 апреля 2012 г. в 11:20

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

  12. Евгения
    25 августа 2012 г. в 10:08

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

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

  13. Александр
    3 сентября 2012 г. в 02:15

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

    1. Dimox
      3 сентября 2012 г. в 09:56 / ответ на коммент Александр

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

      1. Александр
        3 сентября 2012 г. в 10:37 / ответ на коммент Dimox

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

        1. Dimox
          3 сентября 2012 г. в 10:53 / ответ на коммент Александр

          Вот простой пример – http://fiddle.jshell.net/UP34G/3/show/

          1. Александр
            3 сентября 2012 г. в 20:55 / ответ на коммент Dimox

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

            1. Dimox
              3 сентября 2012 г. в 22:52 / ответ на коммент Александр

              Посмотрите код примера и сделайте по аналогии.

  14. Александр
    9 сентября 2012 г. в 11:02

    Все получилось СПАСИБО
    Еще вопрос может подскажите как прописать такую таблицу
    http://imgur.com/OUKKa

  15. Илья
    5 декабря 2014 г. в 02:46

    Вот спасибо)
    на многих сайтах этот вопрос без ответа))
    Оказывается все просто.
    Раньше приходилось в дочернем блоке с фиксированной шириной дублировать фоновое изображение. Там оно не съезжало при изменении ширины экрана.

  16. Александр
    24 февраля 2015 г. в 22:04

    Спасибо. Очень помогли. Два дня панель с ума сводила))) Тема в сети обсуждается…но конструктива мало. Спасибо за исчерпывающий ответ.

  17. Евгений
    9 апреля 2015 г. в 16:22

    Спасибо, очень помогли!

  18. Юля
    17 ноября 2015 г. в 08:34

    И от меня большое спасибо!! Тоже спать спокойно не могла, меню-шка три дня с ума сводила…

  19. azstion
    8 января 2016 г. в 16:31

    Димоксы! Вы просто реально лучшие. Я перерыл пол-интернета для решения этой вроде незамысловатой проблемы, но кроме вас вообще никто нормального ничего не написал! Добавляю ваш сайт в избранное, спасибо! Так держать!

  20. hubby
    12 декабря 2016 г. в 23:08

    Прописал в код body { background-image: url(images/bg.jpg); /* Путь к фоновому изображению */ background-color: #c7b39b; /* Цвет фона */ } а толку ноль. Когда вместо body ставлю div? лишь тогда меняется фон на контенте , а мне нужен задний фон и ссылку на него поставить . Помогите!!! Мои сайты http://detskiy-konstruktor.com.ua/ и http://smartbetting.biz/

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

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.