понедельник, 29 августа 2011 г.

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

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

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

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


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


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

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


<style type="text/css">
.page-wrapper {
  width: 100%;
  background: white url('../img/bkg.png') center top no-repeat;
}
.page {
  width: 960px;
  margin: 0 auto;
}
</style>

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

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


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

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