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

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/

        
        
        
        
                                
                            



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