Stretch background image with border image - css

Question

The following image represents the desired outcome.
Typically I'd apply such case using 3 divs:
<div class="holder">
<div class="edge left"></div>
<div class="content">background color or image stretched here</div>
<div class="edge right"></div>
</div>
This sounds like an overuse of semantics, so I decided to try using border-image, and this is the end result:
But, if I set a background color, it will act as a background for the borders too (can be solved using JPEG instead of PNG with a white background -but this isn't a solution-).
Any ideas or suggestions? Is the use of border-image recommended in the first place (any browser rendering variability?).
The image used and code are below:
<ul id="nav">
<li>Test data Test data Test Data</li>
</ul>
#nav {
border-width: 0px 38px;
border-image: url(images/nav-border.png) 0 50;
height: 30px;
}
https://jsfiddle.net/y7g7w1b3/

Answer 1

Solution 1: Using fill and stretch for border image
You can do this with border-image property itself by using the following settings:
The value fill for border-image-slice. (Make sure that slice is less than half the width of the original image). You can find more details about this option in MDN.
The value stretch for border-image-repeat.
This works in IE11, Edge, Firefox v45, Opera v36, Chrome v51 (dev-m).
#nav {
border-width: 0px 38px;
border-image: url(http://i.stack.imgur.com/5foMd.png);
border-image-width: 34px 98px;
border-image-slice: 17 48 fill;
border-image-repeat: stretch;
height: 30px;
}
#nav li {
line-height: 30px;
}
#nav li a {
color: white;
}
<ul id="nav">
<li>Test data Test data Test Data
</li>
</ul>
Solution 2: Using background color
But, if I set a background color, it will act as a background for the borders too
You can actually clip the background-color such that it doesn't cover the borders. This option can work as long as the shape's background is a solid color.
#nav {
border-width: 0px 38px;
border-image: url(http://i.stack.imgur.com/5foMd.png) 0 50;
background-color: rgb(34,34,34);
background-clip: padding-box;
height: 30px;
}
#nav li {
line-height: 30px;
}
#nav li a {
color: white;
}
<ul id="nav">
<li>Test data Test data Test Data
</li>
</ul>

Answer 2

I wouldn't use border image, instead I would use :before and :after. This creates 2 additional elements before and after your container.
Code below:
.container{
position: relative;
}
.container:before,
.container:after{
position: absolute;
top: 0;
bottom: 0;
content: "";
display: block;
width: 50px;
}
.container:before{ right:100%: }
.container:after{ left: 100%; }
This will create the before and after elements for your container on each side. Then you can style the two elements as required.

Answer 3

You can use a 1px background-image to act as your background-color (I used black in my example, embedded as base64) then combine background-size, background-repeat and background-position to achieve your goal:
Something like:
#nav {
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
background-repeat: repeat-y;
background-size: 100%;
background-position: center center;
border-width: 0px 38px;
border-image: url(images/nav-border.png) 0 50;
}
See Fiddle