CODEWITHSUNDEEP
htmlcss
WashingtonDC
WashingtonDC

Reputation: 58

IE wont show background image as border

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!

Upvotes: 0

Views: 84

Answers (2)

Milche Patern
Milche Patern

Reputation: 20452

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/

Upvotes: 0

Brewal
Brewal

Reputation: 8189

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;
}

Upvotes: 1

Related Questions