Как сделать задний фон?

Question

[Alexandriski]

можете подсказать, как сделать подобный задний фон (оранжевый элипс). При попытке его установить его background-size cover, он растягивается на весь экран слишком сильно. А если ковер не прописать, то фон просто улетает в другую сторону при масштабировании страницы и на больших экранах

Comments

[Сергей Сергей]

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

[Евгений Залецкий]

Дай код пожалуйста.

Ну пока в голову приходит такое, сделай макет в Figma и экспортируй в .png и в css:

.ceлектор{
      backgroun: url(ссылка на твою картинку) center center/hover no-repeat;
}

[Ankhena]

Варианты зависят от адаптива.
Если сайт полностью адаптивен, типа в vw, то соответственно, задали размеры в vw и погнали. Скорректировали, если на каких-то вьюпортах вышло не симпатично.

Если нет.
То из макета нужно экспортировать необрезанную картинку. Т.е. чтобы на больших экранах этот условный "эллипс" как-то логично завершался справа. Сколько влезет.
И позиционируете от центра через calc.

[Антон Литвиненко]

я бы от хиро сделал псевдоэлемент в размерах этого овала, поставил бы его абсолютом и управлял уже им и его размерами относительно родителся
родителю типа позишн релейтив, псевдоэлементу абсолют, ширина 70%, высота 100%, топ 0, райт 0

Answer 1

[Kvason]

https://codepen.io/vankvas/pen/WNzRjON