Border around CSS background image - css

Question

I want to draw a border around a CSS background image, which resizes itself according to window size in a container div. I can draw a border around the div, but not around the image itself.
Can this even be done in this kind of setup?
Rather than post code here, I've made a working example HERE
<style parse-style>#pimg {
background:#FFF url( {{ img }} ) center center no-repeat;
background-size: contain;
height: 100%;
position:relative;
-webkit-transition: All 0.3s ease-in-out;;}
</style>
Thanks in advance.

Answer 1

No, there's no way to do that. You could add a second div that contains the image, but then you wouldn't be able to use background-size: contain.
If you knew that the image dimensions wouldn't change, you could add a second background-image, positioned in the same way, that was simply a transparent png with the border you wanted... but that would be really silly.

Answer 2

Unfortunately I don't have the time to create a working example right now, but a possible workaround may be the use of multiple backgrounds: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
The second background could be an SVG rectangle with a stroke. To avoid possible stroke deformation due to scaling, use non-scaling stroke: https://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke

Answer 3

As shipshape said, there's no way to draw border for BG image but I got an idea which may help you. You can use 2 background images and the behind one can be a plaint colored background playing role of the border. See the code below:
#pimg {
border: 1px solid black;
width: 200px;
height: 200px;
background-image: url({{ bg-image.jpg }}), url({{ 1px.jpg }});
background-size: 90% 90%, 100% 100%;
background-repeat: no-repeat, repeat;
background-position: center center, left top;
}
Use 1x1px shim image in your desired color as the border and repeat it.
The background size can control the width of the border. If you increase 90%, the border will be thinner and if you decrease it, the border will be wider.