Как адаптировать данное фоновое изображение?

Question

[Overlord934]

https://codepen.io/Loremord/pen/PoxEQwN

Обрезается текст при уменьшении ширины. Как правильно адаптировать, чтоб изображение обрезалось не справа, а слева(если такое возможно)

Comments

[Ankhena]

Оно вообще не должно обрезаться. Замените на contain.

Но если прямо по сути вопроса, то хорошо бы изучить простейшее свойство background. Вообще в любом справочнике и посмотреть из каких частей оно состоит.
В данном случае нужно background-position

[Overlord934]

Ankhena, Да, помогло решение снизу. Но изображение должно быть на 100vh. Если использовать contain изображение не будет расширяться на всю страницу.

[Ankhena]

Overlord934, т.е. дизайнер предпочитает обрезанный лого и текст? Меняйте дизайнера при первой возможности.

[Overlord934]

Ankhena, в этом и помогло св-во background-position: right). Теперь обрезается "тьма" слева, а не логотип с текстом. А когда доходит до обрезания логотипа есть мобильная версия картинки.

[Overlord934]

Ankhena, И все же решение с contain было верным. Но теперь вырисовывается другая проблема, при указанной высоте хедера изображение уменьшается и остается белое пространство. Это как-то решается?

[Ankhena]

Overlord934,

Это как-то решается?

А какой цвет нравится?
Тот и поставьте.

А когда доходит до обрезания логотипа есть мобильная версия картинки.

Если по-другому скомпонованное лого, то норм.
А так, оно вроде векторное было.

[Overlord934]

Ankhena, При contain происходит вот это. Т.е цвет тут не поможет

[Ankhena]

Overlord934, так задайте черный цвет.
Изображение поставьте по центру.

Или позовите дизайнера, пусть скажет, на какой ширине как показывать.

[Overlord934]

У картинки фон стоит не черный. Поэтому будет вот так

Answer 1

[Rsa97]

background-position: right;