border-image and background color filling

Question

I have a div that uses a border-image. The border width is 33px but the image doesn't fill the total width and has transparency. I want to have a background color that would fill exactly the inside of my border.

Here is the code I came with: http://jsfiddle.net/kvo8zyr7/1/

.content {
width: 500px;
height: 500px;
border: 33px solid;
border-image: image-url("interface/global/popup_border.png") 33 stretch;
margin: 0 auto;}

.sub-content {
position: relative;
left: -33px;
top: -33px;
width: 500px;
height: 500px;
border-left: 15px solid rgba(0,0,0,0);
border-top: 14px solid rgba(0,0,0,0);
border-right: 15px solid rgba(0,0,0,0);
border-bottom: 14px solid rgba(0,0,0,0);
background-color: #e4e2d7;
background-clip: padding-box;
z-index: -1;}

The problem is that all elements I have in my sub-content div are unclickable because the layer is behind...

Any ideas to whether:

Make the elements clickable
Have the same visual result with a different solution than mine that wouldn't make the elements unclickable?

Thanks in advance for your help.

score 0 · Answer 1 · answered Mar 08 '15 at 03:36

0

  Try this

  .content {
        width: 500px;
        height: 500px;
        border-width: 33px;
        border-style: solid;
            -webkit-border-image:url("http://i.imgur.com/SVFLQko.png") 30 30 round; /* Safari 3.1-5 */
        -o-border-image:url("http://i.imgur.com/SVFLQko.png") 33 33 round; /* Opera 11-12.1 */
        border-image:url("http://i.imgur.com/SVFLQko.png") 33 33 round;
        margin: 0 auto;
    }

answered Mar 08 '15 at 03:36

Ibrahim Badusha

152
5

This is not helping in any way. – Camille Blanc Mar 08 '15 at 06:25

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

In reply to your comment I corrected the jsfiddle and here's another solution jsfiddle which works better by just switching the content div inside the sub-content with adjusting the positions and removing z-index and after some search on z-index it seems the nested div you have is the problem as it will not be possible this way.

Some references to understand this:

1) Please read this About z-index for child and parent

2) And this Image frame border and z-index

edited May 23 '17 at 11:43

Community

1
1

answered Mar 08 '15 at 03:44

zeidanbm

522
4
15

No, with this solution I have the background color that overlaps the corners of my border image which is exactly what I'm trying to avoid! – Camille Blanc Mar 08 '15 at 06:22
sorry didn't see that! check [THIS ONE](http://codepen.io/anon/pen/qEMXGX) it might help you. I had to enclose the content of radio button and text in a separate div that is not related to the content div. – zeidanbm Mar 08 '15 at 06:57

border-image and background color filling

2 Answers2