issues with border-image in css

Question

I'm working on some code for a friend - and she wants me to create a sidebar for her with an image as a border - she's provided the image and everything, but my issue is that using the border-image code in css scales down the image to a REALLY tiny version and you can hardly see it. I presume that it's something to do with the border-image code I have, but no matter how I tweak it, I can't get it to scale up to something visible.

Could anyone help me understand exactly what to tweak on this code to get the image to something visible?

HTML

<div id="sidebar">
    <ul id="sidenav">
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126546-custom-orders"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/menuFontPSDfile_zps07909da5.png" /></a>

        </li>
        <li>    <a href=""><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/DesignSeries_zps3a1baebc.png" /></a>

        </li>
        <li>    <a href=""><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/DecodenCases_zps369ccf66.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/183038-nails"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Nails_zpsc77c5d0e.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/183036-necklaces"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Necklaces_zps983a23c8.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/258653-bracelets"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Bracelets_zps9a4c3f9b.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126552-charms"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Charms_zps7a802dc8.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126549-rings"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Rings_zps46bcfc13.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126550-key-chains"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/KeyChains_zps9e30ffa2.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/126551-hair-clips"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/HairClips_zpse1e4a75f.png" /></a>

        </li>
        <li>    <a href="http://www.nerosdecoshoppe.com/collections/203043-sale"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/Sale_zps8bedfa19.png" /></a>

        </li>
        <li>    <a href="https://docs.google.com/forms/d/1baYFoTxVinyA9afg8fhC__etLbVpZrqLTAemxt9YIYw/viewform"><img src="http://i758.photobucket.com/albums/xx229/nerobasterdino/Text/CustomOrderForm_zps6b55863d.png" /></a>

        </li>
    </ul>
</div>

CSS

#sidebar {
    -webkit-border-image: url('http://i.imgur.com/wdljzHL.png') 25 30 110 120 repeat stretch;
    -o-border-image:url('http://i.imgur.com/wdljzHL.png') 25 30 110 120 repeat stretch;
    border-image:url('http://i.imgur.com/wdljzHL.png') 25 30 110 120 repeat stretch;
    width: 209px;
    border-width:25px 30px 10px 20px padding: 15px;
}
#sidenav {
    list-style-type: none;
}

Here's the jsfiddle and link to the original image (so you can see what it looks like)

http://jsfiddle.net/8bDcE/

http://i.imgur.com/wdljzHL.png

Answer 1

You want background-image not border-image for this asset.

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

http://jsfiddle.net/seancannon/3BvWf/

Another method to take full advantage of your asset is to use some z-index assignments and place an img tag inside the element which will stretch to accommodate the parent:

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

Then the CSS is this:

#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;
}

http://jsfiddle.net/seancannon/3BvWf/1/