CSS border-image negative offset (without HTML edition)

Question

We are looking to obtain exactly this type of border for almost all img tags inside the content area of a CMS (wordpress/joomla) site (that's why we are searching for a solution using only CSS, without accesing any parent tag):

First step goes smoothly with the code form here: http://border-image.com/ (the link should show our border image used), but it creates a space between the image and the edge of the actual border.

We first tried some CSS rules that could do the job, but:

1. border-image-outset: it only extends to outside, not inside, helps for cases where background is solid color
2. outline-offset: works only for the outline, doesn't affects the border-image
3. Multiple Backgrounds: Is the nearest one, but the borders show BELOW the image, so it needs to have a padding applied. We are expecting it to be partially over the image as intended (indeed it is what we've implemented until now).

We have already found many similar questions and tried using the most applicable answers:

1. ::after : it needs the image to have content="" which disappears it.
2. jquery $(img).after: We can't position the border elements relatively to the correspondent image, as they are precisely inserted AFTER the image (the same with before). We would require to set this on the parent tag which most times doesn't has the same size of the img. We are at the moment trying some wrap.

Until now we haven't been able to solve the problem as intended.

Here's a JSfiddle where we are making tests with all above 5 options and have enough material to work (neat image, grouped and separated corners, all mentioned codes appliead, etc).

We would really appreciate somebody achieving the exact result applicable for the img tag.

Answer 1

::after is no good for img elements, because such pseudo elements are supposed to be inserted as a virtual child element inside the element, and image elements can not have children.

But why not simply wrap the image inside a span (can be done via jQuery), and then have the background applied to that?

.image-border {
    display:inline-block; /* so that it takes up the same space as the image */
    position:relative;
    padding:6px;
    background: url(http://i.imgur.com/0yCz3oA.png) top left,
      url(http://i.imgur.com/fWtyg99.png) top right,
      url(http://i.imgur.com/UcOam5I.png) bottom left,
      url(http://i.imgur.com/pjYWHyM.png) bottom right;
    background-repeat: no-repeat;
}
.image-border img {
    position:relative; /* for z-index to work */
    display:block; /* so that margins can work and there is no underline space reserved */
    margin:-3px; /* drag image “under” the borders on each side
                    by half of the border width resp. span padding */
    z-index:-1; /* make image display below the span */
}

http://jsfiddle.net/nfsuxbyL/

Answer 2

You need a wrapper to use $(img).after because border elements get size of the parent (and insert the corners to just that element). You can use this code and some css:

$('img').wrap('<div class="IMGwrapper"></div>')
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/0yCz3oA.png" class="TL" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/pjYWHyM.png" class="BR" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/UcOam5I.png" class="BL" />');
$('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/fWtyg99.png" class="TR" />');

.IMGwrapper {
  display: inline-block;
  position: relative;
  line-height: 0;
}
.IMGwrapper .TL,
.IMGwrapper .TR,
.IMGwrapper .BR,
.IMGwrapper .BL {
  position: absolute;
}
.IMGwrapper .TL {
  top: -3px;
  left: -3px;
}
.IMGwrapper .TR {
  top: -3px;
  right: -3px;
}
.IMGwrapper .BR {
  bottom: -3px;
  right: -3px;
}
.IMGwrapper .BL {
  bottom: -3px;
  left: -3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery'd Edges:
<img src="http://i.imgur.com/ZLmYjVc.png" />