Руководства

Как зафиксировать положение фона на веб-странице при уменьшении размера окна браузера

2011.08.29

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

Однако, когда пользователь берётся за правый край окна браузера и делает его ширину меньше, чем ширина полосы контента, фоновая картинка уезжает влево, то есть, прекращает располагаться там, где она располагалась относительно контента. А вот это уже нехорошо.

Решение данной проблемы довольно простое. Спасибо aackose за статью “Large CSS background moves on resize, in IE 8”

Допустим, у нас есть такая разметка:

<...>
  <body>
    <div class="page-wrapper">
      <div class="page">
        <... контент здесь...>
      </div>
    </div>
    <...>
  </body>
<...>

И такие стили:

    .page-wrapper {
      width: 100%;
      background: white url('../img/bkg.png') center top no-repeat;
    }
    .page {
      width: 960px;
      margin: 0 auto;
    }

При такой разметке как раз и наблюдается данный баг. Если окно браузера явно шире чем 960px, то всё выглядит так, как надо — полоса .page расположена посередине фонового изображения. Если окно браузера уже, то .page начинает выравниваться по левому краю, а фоновая картинка продолжает выравниваться по центру viewport'а.

Чтобы избавиться раз и навсегда от этой проблемы, надо добавить тот же фон к .page:

    .page {
      width: 960px;
      margin: 0 auto;
      background: white url('../img/bkg.png') center top no-repeat;
    }

Трюк в том, что у блока-обёртки выставлена ширина 100%, а у полосы контента — 960px.