Что делать с таким фоном?

Question

[IIIu6ko]

Есть вот такой фон. Он цельный, просто градиенты слепленны. Какие есть варианты реализации?
У меня в голове вариант с нарезкой под каждую секцию, но что делать при адаптиве(макетов нет :))
Плюс непонятно что делать, если контента станет больше, чем изначально. Сделать фон просто одной длинной картинкой - лучший вариант видимо))

Comments

[Владимир Проскурин]

А мне кажется, это просто заблюренная картинка. В исходниках фигмы наверняка можно понять, сделано это через множественные градиенты (что вряд ли), либо же реально картинка с применением блюра в фигме.
Если ни то, ни другое, то нужно согласовывать с дизайнером, по какому принципу строится это изображение.

[IIIu6ko]

Владимир Проскурин, Так и есть, есть одно основное изображение с фоном и на него накидано ещё несколько градиентов

[vahromeevilya-widestudio]

Если это сделано картинкой, то только ей и остается делать, но проблема в том, что картинка таких размеров может сильно ударить по оптимизации сайта и баллам page speed . Я бы на вашем месте попробовал обсудить с дизайнером другой вариант бэка

[Ankhena]

IIIu6ko, так и делать. Взять картинку, поверх наделать градиентов.
Можно собрать все кругляхи в одну SVG, но если там много блюра, то браузер может быть недоволен.

Только не забудьте убрать clip-content с оберток в фигме, чтобы ничего не обрезалось. А потом отредактируйте фрейм так, чтобы он был симметричен относительно центра, а по верху обрежьте по верху страницы.

[Anonymous]

Это очень сложный-сложный градиент, судя по всему. Скиньте макет в фигме, чтобы люди поняли, что именно вам нужно, по скриншоту непонятно

[IIIu6ko]

Ankhena, А какой смысл "кругляхи" отдельными изображениями делать?

[Ankhena]

IIIu6ko, я же написала про блюр и тормоза.
Если тормозов нет, то и норм.

[IIIu6ko]

Ankhena, Просто в JPG весь фон сохранить имею в виду, вместе с градиентами отдельными.

[Ankhena]

IIIu6ko, можно и так, сохраните десяток вариантов для разных media и ретины и пойдет.

Answer 1

[Антон Романков]

Я бы делал картинкой. Реализовать точь-в-точь не уверен, что возможно.
Либо искать какую-то JS либу, которая сделает анимированным фон.

Comments

[IIIu6ko]

Сделал просто изображением, сохранил фон под каждый брейкпоинт и с нужной высотой.
Фон сделал через img и object-fit: cover.
Это все равно лендинг, контент особо меняться не будет.