Как сделать рамку для блока с помощью background-image?

Question

[Dymok]

Есть вот такой блок:

spoiler

Не пойму, как правильно сверстать этот серый фон за блоками, чтобы он растягивался и сужался по контенту. Пытался использовать все виды background-size, ничего не подходит. Как это сделать?
codepen

Answer 1

[Adilet Zhuman]

Имхо, задавать псевдо элемент больше чем 100% не есть хорошо, лучше для блока сделать wrapper, и задать ему background, border-radius; и будет удобно при адаптиве) но решение за вами! Вот пример) https://codepen.io/anon/pen/JaNwwE

Comments

[ScarletFlash]

Смотря, какой use-case.
Но wrapper-ом, действительно, можно сделать. Правда тогда подложка будет главным элементом – внутренний контент будет распределяться по род. элементу, а не задавать размеры его размеры.

[Dymok]

пока что на таком варианте и остановился, спасибо за ответ

Answer 2

[ScarletFlash]

.green-sharp {
position: relative;
background: #fff;
}

.green-sharp::before {
position: absolute;
width: 110%;
height: 110%;
top: -5%;
left: -5%;
content: "";
background: #3d3d3d;
border-radius: 1rem;
}