Как закрепить два фона сверху и снизу?

Question

[Username]

Добрый день, как можно зафиксировать два фона сверху и снизу одновременно? Для двух случаев, когда высота страницы == высоты окна браузера (нет скролла) и когда высота страницы > высоты окна браузера. Каждый раз удаётся, прижать нижний фон только для одного из этих случаев, как это сделать для обоих?
P.s. Высота верхнего фона = 300px + нижнего фона = 300px и того, чтобы эти два фона влезли высота окна браузера должна быть не меньше 600px, предположим, что высота монитора меньше 600px, то нужно верхний фон уводить наверх, нижний уводить вниз от центра, для того, чтобы получилось бесшовная стыковка, в моём случае. Как это сделать?
Спасибо.
https://jsfiddle.net/3oLxr41h/1/

Answer 1

[Svidrigaylow]

Как подогнать разные варианты дизайна под разные разрешения экрана - https://habrahabr.ru/post/119127/
Позиционирование (fixed) - htmlbook.ru/css/position

Comments

[Username]

fixed не подойдёт, мне нужно, чтобы фон был зафиксирован внизу страницы сайта, а не окна браузера.

[Svidrigaylow]

Username: Я так понял, вы хотите добиться дефолтного состояния?

[Username]

Svidrigaylow: Что значит дефолтного?

[Svidrigaylow]

Username: Фон? Я чуть не понимаю. Позиционирование фона - htmlbook.ru/css/background-position

Answer 2

[Владимир Мерк]

Как вариант можно так:
https://jsfiddle.net/ypjrhs7s/

Принцип - фон на всей странице, а контент белый с полупрозрачными переходами.

Comments

[Username]

Хотел также, но проблема в том, что footer не всю высоту нижнего фона занимает и на нижний фон контент должен зализать.

Answer 3

[Ankhena]

У media запросов можно в условиях указывать высоту.

Вариант 1
Соответственно, для разной высоты разные условия позиционирования фонов.
Наверное, еще calc

Сами фоны через запятую. Нижний последний.

Результат: https://jsfiddle.net/yuqxav7b/

Вариант 2
Менять не позиционирование верхнего и нижнего фона, а на добавлять в серединку еще градиент бело-прозрачный.

Comments

[Ankhena]

Username Вы бы хоть начало кода выложили сюда https://jsfiddle.net/ , глядишь и помог бы кто. А искать картинки похожие на ваши, честно, лень.

[Username]

Ankhena W: Вот оригинальные картинки и как делаю в данный момент: https://jsfiddle.net/3oLxr41h/1/

[Ankhena]

Username: прекрасно, следующим ходом делаем картинки нормального размера или дописываем background-size.
Пи этом background-position переносим внутрь общего background

[Username]

Ankhena W: Если несложно, внесите, пожалуйста, изменения на jsfiddle.

[Ankhena]

Username: править за вас картинки я не стану, это перебор.
Поэтому на других https://jsfiddle.net/yuqxav7b/

Answer 4

[Артур Гранд]

https://jsfiddle.net/7qa2brtk/
легко и просто
а что бы состыковалось, используй полупрозрачность на картинке

Comments

[Username]

Ваш метод работает только на экранах высота, которых больше 600px, если меньше, то между контентом и футером появляется большое пустое пространство и скролл, который не нужен, т.к. (контент, header и footer) и без скролла помещаются на странице.

[Username]

А если высота окна больше 600px, то под footer появляется пустое пространство, хотя там должен быть footer и фон.

[Артур Гранд]

Username: ты там что, вместе с 600 пикселями высоты копировал к себе стиль?

[Username]

Артур Гранд: Не получится задать высоту фону, даже зная размеры картинки, описал выше почему

[Артур Гранд]

Username: зачем вообще высоту задавать?