Как сделать общий background на два блока?

Question

[Егор Довыденко]

День добрый.
Имеется два отдельных блока на которые необходимо установить градиентный фон.

Вот что получается при задании для каждого блока:
background-color: #3bf7f7;
background-image: linear-gradient(326deg, #3bf7f7 0%, #3d87db 50%, #9945ff 100%);


А вот как должно быть:


Подскажите, кто знает, возножно ли это сделать силами css/js (если да, то как?) или же требуется отдельно просить у дизайнеров изображения для бэкграунда? Заранее спасибо.

Answer 1

[Дмитрий Шмаков]

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

<section class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</section>

Comments

[Егор Довыденко]

Дело в том, что второй и так уже родитель первого. Просто второй блок открывается при наведении.

Если задавать первому блоку исходный размер большой (+ высота второго блока), то перекрывает слайдер. Если делать динамически изменяемую высоту через JS, то растягивается бэкграунд и в развернутом состоянии отличается от свернутого.

Answer 2

[Сергей delphinpro]

Comments

[Егор Довыденко]

Спасибо.

Answer 3

[Yuriy Lyadov]

Попробуй данный код с css запихать на подобный сайт как этот https://codepen.io/
Я думаю легче будет тебе помочь.