Как сделать отступы для фоновых изображений?

Question

[Дмитрий]

Есть 4 фрагмента изображения для каждой стороны контейнера.

background:
        url(../images/bg_top.png) repeat-x top,
        url(../images/bg_left.png) repeat-y left,
        url(../images/bg_right.png) repeat-y right,
        url(../images/bg_bottom.png) repeat-x bottom;

Но сейчас это выглядит как на рисунке 1. А мне нужно задать еще отступы по краям как на рис 2. Возможно использовать только маленькие фрагменты с repeat.
Подскажите как это сделать?

Comments

[devstudent]

а зачем через фон? там что градиент какой-то сложный? задайте размер фона например 90% по высоте и ширине, а потом позицию фона как 5% от верха и 5% слева . как-то так

Answer 1

[Сергей delphinpro]

посмотрите border-image

Answer 2

[SirMustache]

Можно и без картинок: https://jsfiddle.net/Sir_Moustache/d29298ho/