Как сверстать фоновое изображение, которое выходит за пределы ширины сайта?

Question

[codymaverick]

Есть сайт с шириной, допустим 1200px. И есть фоновое изображение, которое по задумке дизайнера должно выходить за пределы этой ширины. Как это фоновое изображение можно сверстать? Пробовал задавать background-position в процентах, но при уменьшении ширины окна браузера этот фон все равно смещается.

Answer 1

[Максим Девда]

Вариант такой:
у Вас будут 2 блока:

<div class="section">
<div class="inner-wrap">Тут содержимое </div>
</div>

И стили

.section {
width: 100%;
background: url('.....') no-repeat top center
}

.inner-wrap {
width: 1200px;
margin: 0 auto;
}

Answer 2

[Ivanq]

background-position: center;
background-size: cover;

Пробовали? cover растягивает фон (пропорционально) так, чтобы весь элемент был заполнен, но часть фона может обрезаться (судя по описанию, Вам именно это и нужно)