IE不会将背景图片显示为边框

Question

http://dhrumin.com/uploads/index.html

Link above is my page I have been working on. I am using border top bottom as a background image. It looks great on Chrome and FF. But on IE it will just show one solid color background image wont show up.

Can someone help me with what I am missing out?

Thanks!

Answer 1

IE doesn't support the border-image property as you can see here . A workaround would be to create two divs, above and under and give them the desired background-image :

HTML :

<div class="myborder"></div>
<ul id="blockquote">
    <li>Completely formulate parallel customer service rather than B2C initiatives.</li>
    <li>Compellingly target efficient experiences whereas seamless partnerships.</li> 
    <li> Seamlessly transition customer directed applications whereas intuitive.</li> 
    <li> Holisticly mesh team building "outside the box" thinking.</li>
</ul>
<div class="myborder"></div>

CSS :

.myborder {
    width: 600px;
    height: 13px;
    background: url('quote-border.png') repeat-x;
}

Answer 2

Don't accept this has the answer, i just moved content from 'comments'.

border-image is not supported in any version of IE currently - caniuse.com/#search=border-image – Nick

Indeed, you will have to split your html to make a top and a bottom div with background-image – Brewal

@Brewal, those are answers IMHO. – aldux

---

From my own, i would use :before and :after to create what you want.

You want something better ?

 <div class="container with THE-texture and padding"> <div>Your content</div> </div> 

This way, the outter container would act like an image background-border. Here is a working example .

it is to be IDENTICAL in visual result than what you wish. In html, you added 1 extra container. That's a difference.

Oh, let me guess, there are 'simili' borders on the sides ? --> remove side's padding : http://jsfiddle.net/8puJf/1/