Если (насколько понял) проблема в том, что before/after накладываются на контент (кнопки) — есть один хитрый костыль, как убрать их ПОД контент блока (правда, могут быть проблемы с обратной совместимостью для совсем старых/редких браузеров).
На родительском
div:
...
background-image: url("ВертикальнаяРамка.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100% calc(100% - (ВысотаВерхнейРамки×2)px);
/*Рассчитываем высоту вертикального центрального блока
за вычетом верхней и нижней рамки*/
...
transform-style: preserve-3d;
/*Последний параметр нужен для возможности
манипулирования before/after по глубине,
поскольку с ними не работает обычный z-index*/
На
div::before:
width: 100%;
height: ВысотаВерхнейРамки;
background-image: url("ВерхняяРамка.png");
background-position: center;
background-repeat: no-repeat;
...
/*Позиционируем по верхнему краю блока*/
...
transform: translateZ(-1px); /*Уходит ПОД весь контент*/
На
div::after:
width: 100%;
height: ВысотаВерхнейРамки;
background-image: url("ВерхняяРамка.png");
background-position: center;
background-repeat: no-repeat;
...
/*Позиционируем по нижнему краю блока*/
...
transform: scaleY(-1) translateZ(-1px); /*Отражается вертикально и уходит ПОД весь контент*/
Вот как-то так видится...