Strange CSS Border Image Behavior

Question

I have an image that I would like to use as a div frame and background. The following code (and fiddle ) creates an unwanted white background inside a div, despite using background: transparent !important; or background: none !important; (I tried both)

Here is the image I'm using:

Here is the effect that I get:

Here is the effect I want:

Oddly enough, I can achieve the desired effect by opening the web inspector in Chrome and switching the border-image property after the page is displayed. Just turning the border-image off and on again, I get the result I want:

HTML

 <div>test</div> 

CSS

 div { -webkit-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Safari 3.1-5 */ -o-border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; /* Opera 11-12.1 */ border-image: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) 30 30 round; } 

So, if the browser can display it, why can't I write it? :) Any help / suggestions would be great.

Pay attention . I already tried setting the image as a div background-image instead of border-image , and it also did not give the desired results (scaling the image to prevent the border from being cut off was just too much hunch, because the text content of the div is dynamic).

Answer 1

You miss the fill keyword: the standard says:

The fill keyword, if present, causes the middle portion of the border image to be saved. (By default, it is discarded, i.e. considered to be empty.)

See the updated script : writing 30 30 fill seems to solve your problem.

Answer 2

Does something like this work for you? http://jsfiddle.net/qazLuyxh/9/

 div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 40px; width: 520px; height: 320px; background: url(http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png) no-repeat; color: #FFB9B9; font: bold 24px/41px'fontname', Helvetica, sans-serif !important; background-size: 100%; } 

Answer 3

JSFiddle - Click here

Perhaps this will help you. Just shoot in the dark.

 #block { background-image: url("http://img.ctrlv.in/img/14/10/28/544fc2d75c818.png"); height: 100%; width: 450px; background-repeat: no-repeat; } #block .blocktext { padding: 50px; }