Зафиксировать фоновое изображение

ну если человек с 13-летним стажем не видит, что background: url("../img/background.jpg") fixed 0 0; располагает фон слева...

Затупил... Но сути это не меняет.

Получается так, что блоки все смещаются при изменении размера экрана, а фон нет, фон остается на месте из-за fixed. Из-за этого он уже не выглядит так как должен выглядеть. Грубо говоря блоки съезжают с фона.

Вот макет:

Нужно чтобы это было всегда вот так, как бы мы не менялся размер экрана (браузера). И при этом fixed "убивает" футер.

Когда он должен быть таким:

Konark, а чем Вам не нравится предложенный выше вариант с центрированием фона? Ведь блоки страницы у Вас явно расположены по центру.

😒

Я не заметил в оффтопе это предложение. Оно сработало! )

Спасибо, anzarsh!

P.S.: При адаптации под движок, нужно будет разрезать фон для того, чтобы он был более адаптивный? (Больше статей, больше блоков в сайдбаре)

Штоле по высоте? Это отдельная песня. Если забыть про старый IE, то через CSS3 довольно просто. А если через CSS2 - танцы с бубном.

Уже сделал.

Теперь мучаюсь с wrapper-ом, чтобы тоже был адаптивный по высоте (больше статей - больше блок).

html {

    background: url("../img/top-background.jpg") no-repeat center top,

    url("../img/footer-background.jpg") no-repeat center bottom,

    url("../img/middle-bg.jpg") repeat center 600px;

}

Скорее всего Вам лучше будет разделить три фоновых изображения для хедера, футера и блока с контентом. Самое легкое это поставить background-size: cover; - тогда фон будет растягиваться, но соответственно и размываться.

Нет, это если бы немного растянуть, то можно - а если в разы, то некрасиво будет; repeat-y лучше.

Согласен. Можно так же похожим цветом закрашивать...хотя в данном макете все-таки будет лучше repeat-y.

Сайтами не занимайтесь... на завод срочно, если в фиксед 0 0 ты видешь левую сторону )