Here is some HTML and CSS code that would solve your issue:

CSS

.ImageBorder
{
    border-width: 1px;
    border-color: Black;
}

HTML

<img src="MyImage.gif" class="ImageBorder" />

You could set a style for the images, as this:

<img src="yourimage.jpg">
img {border:2px dotted blue;}

And set a unique class for the other images such icons, as this:

<img src="youricon.jpg" class="noborder">
img.noborder {border:none;}

In any case you must make a difference between two images for the css identify each other.

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:

Copydiv.bg {
  background-image: url('http://www.google.com/images/logo_sm.gif');
  border: 5px solid #000;
  width: 50px;
  height: 50px;
}

Copy<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:

Copydiv.bg {
  background: url('http://i.imgur.com/ikxbnvc.png') repeat;
  border: 5px solid #000;
  box-sizing: border-box;
  width: 100%;
  height: 200px;
}

Copy<div class="bg">
   <p>Here is some text to on top of the background image.</p>
</div>

Working example: http://jsfiddle.net/pLz52/

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