Наложение двух изображений в чувствительной среде

Question

Я хотел бы посмотреть, есть ли способ наложить торговую бирку на div. Кроме того, я хочу убедиться, что он реагирует в чувствительной среде. Я пробовал позицию: абсолютный, но для этого мне нужно создать многочисленные точки прерывания медиа-запросов.

<div class="col-md-3 col-sm-4 col-xs-12"> 
    <div class="category-item"> 
     <div class="sale-tag"> 
     <img src="/sale-tag.png"></div> 
     <div class="item-image"> 
      <a href="xxxx"><img src="xxxx.jpg" alt="xxxx" class="img-responsive"></a> 
     </div> 
     <div class="item-details"> 
      <h5><a href="xxxx"> 
       <h4>XXXX</h4> 
       XXXX</a></h5> 
      <hr class="product-item"> 
      <div class="item-price">$XX.00</div> 
      <div class="clearfix"></div> 
     </div> 
    </div> 
</div> 

---

.category-item { 
    min-height: 290px; 
    height: auto; 
    max-height:none; 
    max-width: 250px; 
    margin: 15px 0px 15px 0px; 
    background-color:#fff; 
    box-shadow: 1px 1px 1px 1px #ccc; 
    border-radius:2px; 
} 
.sale-tag { 
    position:absolute; 
    left:16px; 
    top:16px; 
    z-index:23; 
} 

Answer 1

The .category-item должны position: relative; для этой работы.

Я сделал для вас DEMO.

Answer 2

это подходит ли ваши потребности.

<img style="background:url(image.jpg)" src="overlay_image.gif" alt="xxxx" class="img-responsive" />