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

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