Граница фонового изображения

Ответ 1

Это можно сделать, добавив изображение в div и установив границу div

<div style="border:1px solid red;float:left;">
   <div style="background:url("...");float:left;"></div>
<div>

Ответ 2

Без конкретных деталей реализации очень сложно (если не невозможно) предоставить решение, которое работает во всех случаях. Здесь пара решений с ограничениями:

Пример 1 - Фиксированный размер

Если вы знаете высоту и ширину фонового изображения, вы можете сделать что-то вроде этого:

HTML

<div class="bg"> </div>

CSS

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

Рабочий пример: http://jsfiddle.net/WUHmw/

Пример 2 - Повторение фонового изображения

Если фоновое изображение повторяется, вы можете сделать что-то вроде этого:

HTML

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

CSS

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

Рабочий пример: http://jsfiddle.net/pLz52/

Ответ 3

это также можно сделать с помощью css drop-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

 <div class="box">
  <div class="bgImg"></div>
</div>

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

http://jsfiddle.net/wtesuqjz/

поддержка браузера не идеальна