Как правильно верстать фон с одной стороны?

Question

[Кирилл Молчанов]

Необходимо сверстать такой блок...


При разрешении аналогичному макету никаких проблем нет, но если увеличить до 1920 получается вот так. (Картинка ниже)
Пробовал использовать проценты для размера фона, но тогда контент становится маленьким относительно фона. Единсвенная мысль, что похоже нужно использовать относительные единицы измерения, для сохранения соотношения размеров фона и контента.

Или увеличить размер контента на брейкпоинтах.

Не знаю... Подскажите как сделать это правильно

Answer 1

[Арсений Матыцин]

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

И в идеале сделать расчет на JS от конца основной навигации, чтобы ширина изображения всегда закрывала (лежала под) навигацию до конца.

Comments

[Кирилл Молчанов]

Спасибо за ответ!

Answer 2

[Jukekek]

Залей все одной картинкой(оба фона и все) . Зачем делать двумя?