Dispaly the text at corners of the image

HTML:

<div class="col-sm-12 col-md-12 col-xs-12" id="graph">

       <div class="top-right">top-right</div>

       <div class="top-left">top-left</div>

       <div class="top-middle">top-middle</div>

       <div class="bottom-right">bottom-right</div>

       <div class="bottom-left">bottom-left</div>

       <div class="bottom-middle">bottom-middle</div>

       <div class="middle-left">middle-left</div>

       <div class="middle">middle</div>

       <div class="middle-right">middle-right</div>

 </div>

CSS :

#graph{

   background-position: top;

    background-size: initial;

    background-image: url("assets/img/ECG_paper.png");

    min-height: 100%;

    padding: 12px;

    border: 1px solid #ccc;

    margin: 10px 0px;

}

.top-right{

   position: absolute;

    right: 0;

    top: 0;

}

.top-left{

 position: absolute;

    left: 0;

    top: 0;

}

.top-middle{

 position: absolute;

left:50%;

 top: 0;

transform:translate(-50%,0%);

}

.bottom-right{

position: absolute;

     right: 0;

     bottom: 0;

}

.bottom-left{

    position: absolute;

    left: 0;

    bottom: 0;

}

.bottom-middle{

 position: absolute;

left:50%;

 bottom: 0;

transform:translate(-50%,0%);

}

.middle-left{

 position: absolute;

left:0;

 top: 50%;

transform:translate(0%,-50%);

}

middle-right{

 position: absolute;

right:0;

 top: 50%;

transform:translate(0%,-50%);

}

.middle{

 position: absolute;

left:50%;

 top: 50%;

transform:translate(-50%,-50%);

}