html - Adding image as watermark to responsive content -

i have page content below. , when product stock not available need add image watermark saying out of stock. how can this? see sample image. box sizes not fixed. it's dynamic. because in mobile devices box size more wider , stack 1 one (not in row). in case can't use position absolute.

<div class="col-sm-12">      <div class="row">         description product      </div>      <div class="row">         select how many want.      </div>      <div class="row">          out of stock       </div> </div> 

you can use pseudo element add "out of stock" image.

html:

<div class="box1 outofstock"> </div> <div class="box2 outofstock"> </div> <div class="box3 outofstock"> </div> <div class="box4 outofstock"> </div> 

css:

div.outofstock:after {   background: transparent url(http://www.computingsystem.in/img/outofstock.png) no-repeat center;   background-size: contain;   content: " ";   display: block;   position: absolute;   height: 100%;   width: 100%; }  div {   display: inline-block;   width: 100px;   height: 75px;   background-color: #800;   position: relative; } .box2 {   width: 200px;   height: 100px; } .box3 {   width: 250px;   height: 100px; } .box4 {   width: 500px;   height: 300px; } 

https://jsfiddle.net/ufktcas1/

i made boxes different sizes can see how depending on size.

additionally, can opt not use image: https://jsfiddle.net/ufktcas1/1/

in case .outofstock class should added col-sm-12 element. col-sm-12 must have position: relative; work.