Резиновая рамка одним тегом без разрезания исходной картинки

[Werver]

Добрый день, есть картинка рамки, нужно сделать так, чтобы рамка растягивалась по вертикали и горизонтали с изменением размера окна и содержимого, пример: https://werver96.github.io/ramka_one_div/ , здесь рамка сделана фоном и несколькими отдельными отдельными кусками исходного изображения, подскажите кто знает, как сделать тоже самое, одним тегом, а так же не разрезая исходную картинку.

[ADSoft]

отрисовать рамку в SVG

[Werver]

Сообщение от ADSoft

отрисовать рамку в SVG

Не подходит, при изменении размера увеличивается рисунок, а не "резинится". Причем не получается растянуть его по контурам блока чтобы текст был внутри его, нужно чтобы рамка растягивалась на всю ширину браузера

[ADSoft]

одним тегом - не бывает такого
режъте на 3 части.... верх, низ и середина

[Werver]

Сообщение от ADSoft

одним тегом - не бывает такого
режъте на 3 части.... верх, низ и середина

Я сделал одним тегом, выше давал ссылку

<div style="background: 
					url(ramka_left_bottom.png) no-repeat left bottom,
					url(ramka_left_top.png) no-repeat left top,
					url(ramka_right_bottom.png) no-repeat right bottom,
					url(ramka_right_top.png) no-repeat right top,
					url(ramka_vertical_left.png) repeat-y left,
					url(ramka_vertical_right.png) repeat-y right,
					url(ramka_horizontal_top.png) repeat-x top,
					url(ramka_horizontal_bottom.png) repeat-x bottom;
					min-width: 200px;
					margin: 100px auto;
					padding: 60px;	">
Text
</div>

Взял все в один тег div, и добавил несколько частей рамки, но, мне усложнили задачу, и сказали сделать найти способ, реализовать растягивающую рамку, без разрезания исходной картинки на части, так же используя один тег. Если не найду решения до вторника, мне расскажут как.

[Werver]

Сообщение от ADSoft

одним тегом - не бывает такого
режъте на 3 части.... верх, низ и середина

Ответ сам не нашел, однако преподаватель по курсу подсказал, есть достаточно интересное стилевое свойство border-image, ссылка подробнее о ее работе на ютуб https://www.youtube.com/watch?v=p1Uk_gHrLQA . В итоге с одним тегом не разрезая картинку вполне реально это сделать, оставлю может кому будет интересно.

	<style>
.ramka {
margin: 100px auto;
border:100px solid red;
background-size: contain;
border-image-source: url(ramka.png);
border-image-slice: 100;
border-image-repeat: round;
}
	</style>

В этом случае, сам border а точнее обычная линия его границы заменяется картинкой. Вот результат: https://werver96.github.io/ramkaOneDivOneImg/