title: DIVs inside a DIV are misplaced when resizing browser window
body: <p>I have a web page where i have a parent DIV and then multiple child DIVs inside.
  Parent DIV has background image and i made it resizable but the problem is that when i resize webpage all child DIVs are misplaced.</p>
  
  <p>Is there any way to fix that?</p>
  
  <p><a href="https://i.stack.imgur.com/7Zpn9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Zpn9.jpg" alt="Full size browser"></a>
  <a href="https://i.stack.imgur.com/5S05o.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5S05o.jpg" alt="Smaller size browser"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="boiler_room"&gt;
      &lt;div class="HVAC_PUMP_01_STS"&gt;ON&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.boiler_room {
      position: absolute;
      background-image:url('boiler_room_schema.jpeg');
      background-size: contain;
      object-fit: contain;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
  }
  
  .HVAC_PUMP_01_STS {
      position: absolute;
      z-index: 10;
      top: 305px;
      left: 960px;
  }
  </code></pre>