Как слайдеру поставить background-image?

Question

[Мариана Марианова]

Как слайдеру сделать фон в виде такой картинки https://cdn1.savepice.ru/uploads/2020/4/10/b5c41e7... и чтобы эта картинка была адаптивной вместе со слайдером (то есть подстраивалась под его размеры)?
Код скинула сюда https://codepen.io/marishik92/pen/KKdwPgX
Пробовала использовать и background-image и mask у блока banner__slider в css, но ничего не работает

border-image Не подходит, так как мне нужно чтобы картинка была сверху слайдера, а не ставилась как рамка, которая ставится за пределами блока.

Comments

[Антон]

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

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

В HTML добавьте блок:

<div class="myframe">
    <img src="https://cdn1.savepice.ru/uploads/2020/4/10/1a0671bb1c95292f9b9befc93dc3d220-full.png">
</div>

А в CSS:

.myframe {
  position: relative;
  z-index: 1000;
  margin-top: -350px;
  margin-left: 400px;  
}

Идея в том, что используем слой (z-index) для наложения рамки на слайдер с картинками, и слой с рамкой должен быть выше слайдера.
А с размерами рамки и ее положением я думаю Вы сможете разобраться сами?! :)

[Ankhena]

В вашей ситуации больше подойдет border-image
css.yoksel.ru/border-image