Border image on top of table

Question

I have been looking at Z-index to position my border image on top of my table and its contents. I have managed to get the text to go backwards, but I cannot seem to get all the table backwards or the image forwards. I have added tr within the class.

   position: absolute; //static ,relative ,fixed, absolute
   z-index: -1;

http://jsfiddle.net/wayneker/5v1abef2/5/

td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 2px 10px;
}

.tableBorder {
    -webkit-border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch;
       -moz-border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch;
         -o-border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch;
            border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch;

    //  border-top-width: 50px;
    //  border-right-width: 20px;
    //  border-bottom-width: 10px;
    //  border-left-width: 20px;        
      border-width: 50px 20px 10px 20px;
}

Viktor Sarström · Answer 1 · 2016-11-22T14:14:04.630

You might need to split the image into 4 borders to get the achieved effect. You also need to make modifications to your background image.

I don't have access to Photoshop or something similar, so I have forked your jsfiddle and added 4 empty pink boxes where you should add your splitted image (top right, top left, bottom left, bottom).

http://jsfiddle.net/w0vbvggv/1/

I've done the CSS inline on each box.

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; background:#ff00ff; display: block;">
top left image
</div>

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; right: 0; background:#ff00ff; display: block;">
top right image
</div>

 <div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; left: 0; background:#ff00ff; display: block;">
bottom image left
</div>

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; right: 0; background:#ff00ff; display: block;">
bottom image right
</div>

You can also use the same background image on the elements like this jsfiddle. I've used the image above to set them aside.

   <div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; background:url(https://i.stack.imgur.com/e6CO5.png); display: block;">
top left image
</div>

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; right: 0; background:url(https://i.stack.imgur.com/e6CO5.png) top right; display: block;">
top right image
</div>

 <div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; left: 0; background:url(https://i.stack.imgur.com/e6CO5.png) bottom left; display: block;">
bottom image left
</div>

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; right: 0; background:url(https://i.stack.imgur.com/e6CO5.png) bottom right; display: block;">
bottom image right
</div>

the top left and right are the same image but flipped, so too are the bottom ones — Wayne Gilliver, Nov 22 '16 at 13:54
will absolute work ok when the table expands horizontally and vertically ? — Wayne Gilliver, Nov 22 '16 at 13:58
That shouldn't be an issue! I've added an image to the original post, where you need to uncover the background-image. — Viktor Sarström, Nov 22 '16 at 14:05
will try this when i return home also, need to photoshop myself and that is on home pc. will upvote when i check :) but thanks in advance — Wayne Gilliver, Nov 22 '16 at 14:08
Also added a better solution where you use the same background image. :) — Viktor Sarström, Nov 22 '16 at 14:14

score 0 · Answer 2 · edited May 23 '17 at 12:30

Using the CSS border-image attribute with your table in essence locks the z-index of the table to the image. This may work if you are content to resize your table so that it fits inside the border defined by the image.

Otherwise, to use the z-index on the border image you will need to separate the border image tag as its own element from that of the table. Refer to this SO Q&A for this approach.

Border image on top of table

2 Answers2