Допустим, есть веб-страница, которую нужно сверстать. И у этой страницы на фоне по центру стоит очень большая картинка, которая выходит за границы основной полосы контента, создавая красивые приятные поля. Основная полоса контента фиксированной ширины. И это хорошо.
Однако, когда пользователь берётся за правый край окна браузера и делает его ширину меньше, чем ширина полосы контента, фоновая картинка уезжает влево, то есть, прекращает располагаться там, где она располагалась относительно контента. А вот это уже нехорошо.
Решение данной проблемы довольно простое. Спасибо 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.
Достаточно просто для body min-width в ширину сайта указать
ОтветитьУдалить