Border-image transparency for CSS


I have an image, that I created with border CSS. However, on chrome, it doesn't fill up the center of the div with the appropriate color and it's transparent.

This is the image

When I put a background to white, it interferes with the transparency of the borders, which is why I couldn't put it in. Is there another way around this (cross browser compatible of course)?

#post-wrap {
    margin:auto;
    padding: 0px 40px 70px 40px;
    width: 850px;
    border-width: 96px 17px 15px 36px;
    -moz-border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png) 96 17 15 36 repeat;
    -webkit-border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png) 96 17 15 36 repeat;
    -o-border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png) 96 17 15 36 repeat;
    border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png)     96 17 15 36 repeat;
}

Answers:


You simply need to add "fill" for it to include the background.

border-image: url(http://www.nicxtay.com/wp-content/uploads/2012/01/postbackground.png)     96 17 15 36 fill repeat;