Как вывести фоновую картинку шириной 1200px по центру фиксированно?

Question

[kamtm]

Здравствуйте!

Возможно, для кого-то обычная задача и вы сможете направить меня или дать совет.

Структура шапки, как указано на картинке.



Что имеем:

Фоновая картинка в шапке шириной 1200px и высотой 150px
Контент шириной 960px

Что нужно:

Нужно чтобы при сужении экрана, картинка оставалась на месте по центру, при этом, не учитывался размер ее ширины. То есть, чтобы полосы прокрутки горизонтальной не появлялось. Чтобы ее края просто исчезали из-за меньшей ширины экрана пользователя.

То есть, у кого широкий монитор он видит картинку по-центру полностью.

А у кого ширина 1024, он увидит только контент и немного края.

Такое вообще осуществимо?

Сейчас, просто вывожу картинку и контент так:

HTML

<div id="header">
<div class="contentBox">
	<div class="logo"></div>
</div>
</div>

CSS

#header {
 background: url(img/site/header.gif) center no-repeat;;
 min-width:1200px;
 height: 150px;
 line-height: 120px;
}
.contentBox {
 width:960px;
 margin: 0 auto;
}

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

Answer 1

[Юрий Лобанов]

codepen.io/iiil/pen/rfAFJ
Вы собственно сами все и сделали, только min-width для хедера надо поставить в 960px.

Comments

[kamtm]

Да, верно) Но порой только так у меня и происходит, вроде бы все перед тобой, а не видишь)

Answer 2

[vdem]

min-width уберите.

Comments

[kamtm]

Убирал, но тогда получается не очень красиво в случае, когда экран сильно сужен, то картинка обрезается до половины. Видим контент, а в шапке фоновая картинка на 60% отображена, а справа от нее белый фон. Хотя подразумевается, что чем уже экран, тем фоновая картинка на 100% в него входит, но у обрезанными краями..

[vdem]

Ок, ссылку живую можно?

[kamtm]

Верстаю дома, но там просто картинка, а код что выше. То есть представьте, картинка шириной 1200px при разрешении 1280, прекрасно отображается по центру и контент в блоке шириной 960px. Как только мы уменьшаем экран на ширину меньшую 1200px всплывает горизонтальная полоса прокрутки потому что фоновой картинке не хватает места. То есть, нужно обмануть браузер так, чтобы он отображал картинку полностью, но считал ее ширину 1000px грубо говоря. И только от этой ширины показывал полосу, потому что уже контенту не будет хватать места.

[vdem]

В общем, у меня это работает как ожидается. Если Вы задаете min-width в 1280, то у Вас по-любому будет гориз. полоса прокрутки. Задайте в 960, как у contentBox.

[kamtm]

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

[vdem]

@kamtm 1) Фоновой картинке не может не хватать места. Браузер не из-за размера фоновой картинки начинает показывать полосу прокрутки, а из-за min-width размера элемента; 2) Масштабировать фоновую картинку у Вас вряд ли получится. Реальный вариант - чтобы края картинки слева и справа обрезались при уменьшении размера окна.

[vdem]

@kamtm Отлично :)

[kamtm]

Да, сейчас сделали так, как нужно. Потому что сужение области контента вполне логично появление полосы прокрутки. Да она и масштабируется вроде бы сейчас по обоим краям как раз? Или иначе все происходит. На глаз, так хорошо.