background image border
Without specific implementation details it's very difficult (if not impossible) to provide a solution that works in all cases. Here's a couple solutions with the constraints provided:
Example 1 - Fixed Size
If you know the height and width of the background image you can do something like this:
div.bg {
background-image: url('http://www.google.com/images/logo_sm.gif');
border: 5px solid #000;
width: 50px;
height: 50px;
}<div class="bg"> </div>Working example: http://jsfiddle.net/WUHmw/
Example 2 - Repeating Background Image
If the background image repeats, you can do something like this:
div.bg {
background: url('http://i.imgur.com/ikxbnvc.png') repeat;
border: 5px solid #000;
box-sizing: border-box;
width: 100%;
height: 200px;
}<div class="bg">
<p>Here is some text to on top of the background image.</p>
</div>Working example: http://jsfiddle.net/pLz52/
This can be done by adding image in a div and than set the border of the div
<div style="border:1px solid red;float:left;">
<div style="background:url("...");float:left;"></div>
<div>
this can also be done using css drop-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
.box {
width:400px;
height: 400px;
display: flex;
justify-content: center;
align-items:center;
border: 1px solid red;
.bgImg{
width: 300px;
height: 300px;
background: url('http://i.imgur.com/ikxbnvc.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
filter: drop-shadow(0 0 1px black);
}
}<div class="box">
<div class="bgImg"></div>
</div>http://jsfiddle.net/wtesuqjz/
the browser support is not perfect