over 5 years ago

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

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

Решение данной проблемы довольно простое. Спасибо 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.

 
comments powered by Disqus