Question

In reference to this question: css3 border-image firefox 15.0.1

I resolve issues with new version of firefox (15.0.1) and now border-image feature go. But a new issue appears. Content is not filling with the image.

In all browsers the background is filling with the border image, except in new version of firefox.

My class:

border-style: solid none solid solid;
border-width: 12px 0 12px 12px;

border-image: url("img/contents-entry.png") 12 0 12 12 stretch; /* CSS3 recommendation */
-moz-border-image: url("img/contents-entry.png") 12 0 12 12 stretch stretch; /* old Firefox */
-o-border-image: url("img/contents-entry.png") 12 0 12 12 stretch; /* Opera */
-webkit-border-image: url("img/contents-entry.png") 12 0 12 12 stretch; /* Safari */

background-color: transparent;

Thanks

UPDATE:
This is my test in http://jsfiddle.net/angelcervera/8YWXs/ :

div {
border-width:15px;
width:250px;
padding:10px 20px;
background-color: red;
}

#round {
border-style: solid;
border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") fill 30 30 30 30 stretch;
-moz-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") 30 30 30 30 stretch; /* Firefox */
-webkit-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") 30 30 30 30 stretch; /* Safari */
-o-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border1.png") 30 30 30 30 stretch; /* Opera */
}

I added:

• background-color: red; in div styles to distinguish the white background page from div background.
• border-style: solid; border-image:url(“border.png”) fill 30 30 30 30 stretch; in #round styles to work in firefox, but doesn’t fill.
• I changed image with a no transparent image.

Answer 1

As I said in the other question, you need:

border-image: url("img/contents-entry.png") fill 12 0 12 12 stretch;

if you want to fill the central area of the box. See http://www.w3.org/TR/css3-background/#border-image-slice