Как правильно наложить многослойный background на div-блок?

Question

[Alexander]

Прилагаю скрин "рамки", чтоб было понятней.



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

.border {
	background:

	url('/img/background-border-1.png') left -1px top -1px no-repeat,
	url('/img/background-border-2.png') right -1px top -1px no-repeat,
	url('/img/background-border-3.png') left bottom no-repeat,
	url('/img/background-border-4.png') right bottom no-repeat,
	url('/img/background-border-5.png') left top repeat-x,
	url('/img/background-border-6.png') left bottom repeat-x,
	url('/img/background-border-7.png') left bottom repeat-y,
	url('/img/background-border-8.png') right top repeat-y transparent;
}

т.е в конечном результате див с классом border должен нарисовать рамку для контента как на скрине.
Проблема в том что если в див запихнуть текст, рамка рисуется, а если img то картинка наложится на рамку и прячет её. т.е рамка прячется под img.

Задавал вложенному элементу z-index: -1, рамку видно но тогда кликать на ссылку уже не получится.

#####
Что я упустил??

Comments

[Ankhena]

1. Абсолютом поверх блока с картинкой.
2. Может вам поможет css border-image
3. Или pointer-events
Или сотворите песочницу на codepen или jsfiddle или где удобнее.

[Alexander]

Ankhena, обновил.

[Kizzeon]

1. Зачем если можно скрепить всё в 1 изображение?
2. Даже если не в одно то почему рамку бы не скрепить и поместить в 1 див вместе с обычным изображением?
3. Несколько url с изображением в background - костыль.
Такой (г?)код непонятен, не поддерживается разрабами и вообще бяка.

[Kizzeon]

В-2. Див задать с position relative а изображениям картинки и рамки внутри дать position absolute и отпозиционировать

[Вадим]

самый простой вариант - дбавьте padding для .background-border

[Ankhena]

Kizzeon,

1. Зачем если можно скрепить всё в 1 изображение?

И сколько картинок вы так будут обрабатывать? А если их тысячи на сайте?

2. Даже если не в одно то почему рамку бы не скрепить и поместить в 1 див вместе с обычным изображением?

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

3. Несколько url с изображением в background - костыль.

Да, я выше написала альтернативу. Но и альтернатива - не подарок.

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

Кому не понятен и что они там собрались поддерживать? )))))

Answer 1

[Антон Усачев]

Для блока background-border дать position: relative, внутри создать абсолютно позиционированный псевдоэлемент на z-index: 1 со всеми стилями, которые сейчас используются для самого background-border. Это позволит не плодить блоки явно, а справиться только средствами css.

Answer 2

[Ankhena]

Держите https://jsfiddle.net/zy36t1La/

Но разумнее переделать на border-image, тогда хоть картинка будет одна.

Comments

[Alexander]

Правильно ли я понимаю, все углы рамки запихнуть в один слой и делать уже вывод пиксельно, нужного мне элемента?

[Ankhena]

Alexander, вся рамка это одна картинка.

делать уже вывод пиксельно

Что вы имеете в виду?

[Alexander]

Ankhena, "url() no-repeat -3px -108px" и т д

[Ankhena]

Alexander, посмотрите, пожалуйста, свойство border-image, я 2 раза уже ссылку давала.