JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="outer">

  <section class="field">

    <i class="player" style="left: 28%; top: 14%;">*</i> 
    <i class="player" style="left: 39%; top: 9%;">*</i>
    <i class="player" style="left: 58%; top: 9%;">*</i>
    <i class="player" style="left: 69%; top: 14%;">*</i>

  </section>

</div>

CSS

.outer {
   width: 100%;
   height: 900px;
 }
 
 section.field {
    width: 100%;
    height: 100%;
    background: url('http://s16.postimg.org/c5a4is9sl/field.png') no-repeat;
    background-size: contain;
    position: relative;
  }
  
.player {
    font-size: 1.2rem;
    position: absolute;
}