border-image over an image

Question

I want to have a border image over an image. The border-image isn´t straight so the overlays should lie over the image and not behind. I tried this with z-index, but doesn´t wor

Answer 1

You can achieve that by:

Using the image as a background

.sprocket-mosaic-image-container {
    position: absolute;
    
     /** define width and height of the image **/
    width: 375px;
    height: 281px;
    
    /** set the box sizing so the border dimensions would be part of the width and height **/
    box-sizing: border-box; 
    
    border-style:solid;
    border-width: 60px 28px 87px 24px;
    -moz-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    -webkit-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    -o-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
    
    /** set the image as background **/
    background: url(http://i.imgur.com/rdZ1sYQ.jpg) no-repeat;
    
    /** define the origin so the image would be under the border **/
    background-origin: border-box;
    
    z-index:1;
}

.sprocket-mosaic .sprocket-mosaic-image {
    position:relative;
     z-index:0;
}

<div class="sprocket-mosaic-image-container"></div>

Borders on an absolutely positioned pseudo element

If you must have an image tag (unknown width and height for example), you can define the borders on an absolutely positioned pseudo element on the container.

.sprocket-mosaic-image-container {
  position: absolute;
  z-index: 1;
}

.sprocket-mosaic-image-container::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-style: solid;
  border-width: 60px 28px 87px 24px;
  -moz-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
  -webkit-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
  -o-border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
  border-image: url(http://i.imgur.com/qfJxhX2.png) 60 28 87 24 repeat;
  content: '';
}

.sprocket-mosaic .sprocket-mosaic-image {
  position: relative;
  z-index: 0;
}

<div class="sprocket-mosaic-image-container">
  <img src="http://i.imgur.com/rdZ1sYQ.jpg" alt="Simple Item 2" class="sprocket-mosaic-image">
</div>

Answer 2

in my opinion border image not a good idea for this case . you can use more elements to build up that . try this one : https://jsfiddle.net/cz1k6bcn/

<div class="sprocket-mosaic-image-container">
        <span class="top-border custom-borders"></span>
        <span class="bottom-border custom-borders"></span>
        <span class="left-border custom-borders"></span>
        <span class="right-border custom-borders"></span>
                                <img src="http://wildstar-mmo.de/images/sampledata/fruitshop/apple.jpg" alt="Simple Item 2" class="sprocket-mosaic-image">
                            </div>



.sprocket-mosaic-image-container {
  position:relative;
    margin-bottom: 15px;
    display: inline-block;

}
.custom-borders {
    url(http: //www.wildstar-mmo.de/images/border-news.png);
    background: url(http://www.wildstar-mmo.de/images/border-news.png);
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
}

.top-border.custom-borders {
    height: 35px;
    width: 100%;
}

.bottom-border.custom-borders {
    background: url(border-news.png);
    height: 82px;
    bottom: 0;
    top: auto;
    width: 100%;
    background: url(http://www.wildstar-mmo.de/images/border-news.png);
    background-position-y: -482px;
    background-size: cover;
    z-index: 444;
}

.left-border.custom-borders {
    height: 100%;
    width: 12px;
}

.right-border.custom-borders {
    right: 0;
    height: 100%;
    width: 13px;
    left: auto;
}

.sprocket-mosaic .sprocket-mosaic-image {
    border-radius: 3px;
    position:relative;
}