Html css中的边框图像问题

我正在为一位朋友编写一些代码——她希望我为她创建一个边栏，以图像作为边框——她提供了图像和所有内容，但我的问题是，在css中使用边框图像代码会将图像缩小到一个非常小的版本，而你几乎看不到它。我认为这与我拥有的边框图像代码有关，但无论我如何调整它，我都无法将其放大到可见的程度

有谁能帮我准确地理解如何调整代码，使图像变得可见

HTML

这里是JSFIDLE和原始图像的链接（因此您可以看到它的外观）

---

您想要此资产的

背景图像

而不是

边框图像

#sidebar {
    background-image  : url('http://i.imgur.com/wdljzHL.png');
    background-size   :cover;
    background-repeat : no-repeat;
    width             : 209px;
}
#sidenav {
    list-style-type : none;
}

另一种充分利用资产的方法是使用一些

z-index

赋值，并在元素内放置一个

img

标记，该标记将拉伸以容纳父元素：

<div id="sidebar">
    <img class="bg" src="http://i.imgur.com/wdljzHL.png" />
    <ul id="sidenav">
        ...

#sidebar {
    background-image  : url('http://i.imgur.com/wdljzHL.png');
    background-size   :cover;
    background-repeat : no-repeat;
    width             : 209px;
}
#sidenav {
    list-style-type : none;
}

<div id="sidebar">
    <img class="bg" src="http://i.imgur.com/wdljzHL.png" />
    <ul id="sidenav">
        ...

#sidebar {
    width    : 209px;
    position : relative;
}
#sidenav {
    list-style-type : none;
    position        : relative;
    z-index         : 1;
}
#sidebar .bg {
    width    : 100%;
    height   : 100%;
    position : absolute;
    z-index  : 0;
}