JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-container">
		<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img-template">
		<div class="item"></div>
	</div>

CSS

/* This is your container with the background image */
.image-container {
	background:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png') no-repeat;
	background-size:100%;
	overflow-x: hidden;
  position:relative;
}

/* This is the template that resizes the DIV based on background image size */
img.img-template {
	visibility: hidden;
	width:100%;
	height:auto;
}

/* This is the item you want to place (plant pot) */
.item {
	position: absolute;
	left: 14.6%;
	bottom: 80.3%;
	width: 15%;
	height: 15%;
	background: yellow;
	border: 2px solid black;
}