JSFiddle - React, Tailwind, and code Playground

by Jonathan Nascimento

HTML

<div class="container">
  <div class="positioned"></div>
</div>

CSS

body {
  background-color: #404040;/* optional, to see position */
}
.container {
  background-image: url(https://i.stack.imgur.com/2EzPF.jpg);
  background-size: cover;
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  /* Center the container */


}
.positioned {
  background-image:    url(https://i.stack.imgur.com/jpkTo.png);
  background-size:     cover;
  height:10vh;
  width:10vh;
  position: absolute;
  top: 58%; /* Positioned on bottom left corner of factory*/
  left: 33%; /* Positioned on bottom left corner of factory*/
  opacity: 0.8; /* optional, to see position */
}
.positioned:hover {
  background-image: none;  /* optional, to see position */
}
@media (max-aspect-ratio: 1/1) {
  /* css for vertical viewport */
  .container {
    height:90vw;
    width:90vw;
  }
  .positioned {
    height:10vw;
    width:10vw;
  }
}