境界に画像を置きたい。

Question

お世話になっております。

<div id="navMainWrapper">
ほげほげ
</div>
<div id="mainWrapper">
ふがふが
</div>

となっているときに
境界リボンの画像（kyokai.png）を
横に伸ばすか 横にならべるかして境界にかけたいと思っております。

その際の実装方法が

div#navMainWrapper {
}
div#navMainWrapper:after{
  border-image: url(images/kyokai.png) repeat-x; } 

などと弄っても上手く行きません。
Cssで境界を装飾する方法は無いのでしょうか？

お忙しいところ大変申し訳ないのですがご助力頂けますと幸いです。

Answer 1

こういうことでは？

div#navMainWrapper:after{
	content: ''; /* 必須 */
	display: block; /* 必須 */
	height: 1em; /* 高さ必須 */
	background-image: url(https://placehold.jp/12/cc9999/993333/350x15.png); /* backgroundで処理 */
}
```**動くサンプル：**[https://jsfiddle.net/dej7v4Lv/](https://jsfiddle.net/dej7v4Lv/)

Comments

[moitaro]

ありがとうございます。
```
div#navMainWrapper:after{
content: '';
display: block;
height: 1em;
background-image: url(https://placehold.jp/12/cc9999/993333/350x15.png);
}
```
こちらでなんとかなりそうですが
ピクセル単位で上下させる方法をお教え頂きたいです……

本当に申し訳ないのですがご助力頂けないでしょうか？

[moitaro]

また　下の
<div id="mainWrapper">
の画像の下に表示されてしまうのです……

情報不足で大変ご迷惑をかけますがご助力頂けますようよろしくお願い申し上げます。

[kei344]

「ピクセル単位で上下」の意味がわかりません。

> の画像の下に表示されてしまうのです……
質問文を良く見てください、画像がありますか？全体のHTML/CSSがわからないと適切に回答することは出来ないです。

デベロッパーツールで状態をみて必要なスタイルを考えてみては？

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

[moitaro]

ご返答が遅くなり申し訳ございません。

動くサンプル：https://jsfiddle.net/dej7v4Lv/
を弄って動作させる事が出来ました。

本当にありがとうございました。

Answer 2

repeat-xという指定方法はbackground-imageのものでborder-imageにはありません。
border-imageに使用する画像は、いわゆる9パッチと呼ばれるものを使用します。
border-imageに使用する画像URLの次の数字がborder-image-sliceに当たる数字でスライスサイズとなり、その次のroundやround stetchといったものがborder-image-repeatに当たるものでこれが繰り返しの設定となります。

.target{
  border: 10px solid;
  border-image: url('...') 10 round;
}

サンプル