Как быть с background-image на экранах, которые больше 1920px?

Question

[Roderen]

https://roderen.github.io/ceiling/app/

При экранах, которые больше 1920px, фон (background-image) второго блока обрезается снизу и контент едет вверх за пределы фона. Как быть в такой ситуации?

Я вижу единственный вариант:
Для фона background-size: 100% 100%; для экранов больше 1920пх.
Но не знаю правильно ли это? Можно ли так делать с фоном (не растягивать его)? Как быть короче?

Comments

[Вадим]

Но не знаю правильно ли это? Можно ли так делать с фоном (не растягивать его)? Как быть короче?

Правильно для чего или кого?
Что значит "можно ли"?
А как быть: если Вы и жнец и на дуде игрец и верстальщик и дизайнер - то решать Вам, если нет, то идти к дизайнеру и спросить как нужно сделать

[Roderen]

Хорошо. Допустим, что у меня только один вариант - нужно, чтобы фон растягивался при разрешении больше 1920пх. Что в этом случае делать?

[Ankhena]

Roderen,

Я вижу единственный вариант:
Для фона background-size: 100% 100%; для экранов больше 1920пх.

preserveAspectRatio для SVG не забудьте, а то ничего не выйдет из вашей затеи.

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

Не очень понятно, в чем тогда вопрос.
Его и делать.
Можно изменять отступы в зависимости от получающихся пропорций блока так, чтобы текст не выходил из зоны. волны

[Максим Иванов]

Ankhena, А это нормально, что например при разрешении более 1920пх, фон обрезается снизу? То есть я просто должен сделать медиа запросы с большими отступами (паддинги)?

[Ankhena]

Максим Иванов,

А это нормально, что например при разрешении более 1920пх, фон обрезается снизу?

Спросите у дизайнера. Хорошо ему так или нет.

Поскольку там всё равно не видно даже люстры, а без неё, мне кажется, нет возможности осознать, что нарисовано на картинке, т.е. воспринимается она просто как какие-то пятна, то вообще без разницы.

Также вы можете взять целую прямоугольную картинку в качестве фона, а потом отдельно (clip-path или тип того). Или наоборот наложить белые svg-волны сверху и снизу с фикс или плавающей высотой.

Answer 1

[nickejes]

Для экранов больше 1920px можно прописать на фон background-size: cover;
Данное свойство будет фон подстраивать под устройство и растягиваться по всему экрану

Comments

[Roderen]

И получается увеличивать паддинги для контента, чтобы он становился по центру и так вплоть до 7680пх?