Element relative to specific Image point which is background-size : cover

Question

I have a scenario like below:

 .cover-image { background : no-repeat url('https://thumb9.shutterstock.com/display_pic_with_logo/536575/164027042/stock-photo-simple-and-stylish-office-environment-164027042.jpg') center center / cover; height : 100vh; width : 100vw; position : absolute; z-index : 1; left : 0; } body{margin : 0; padding : 0; } .data{ position:absolute; position: absolute; z-index: 10; height: 30px; width: 40px; top: 61vh; left: 11vw; background: red; } .container { position : absolute; height : 100vh; width : 100vw; } 

 <div class="container"> <div class='cover-image'></div> <div class='data'>chair</div> </div> 

Here the Data box should always be at left top of chair, If we resize the window.

How can we achieve this?

Answer 1

There are better ways to accomplish that, but taking your existing code and make it work, the following seems to be the solution for your scenario. Note that you will have to play around with the correct sizing, this is just the idea. (You can see a DEMO here).

HTML

<div class="container">
   <div class="cover-image">
   </div>

   <div class="data">Chair</div>
</div>

CSS

body{
   margin: 0 auto;
}
.container{
   width: 1000px;
}

.cover-image { 
   background : no-repeat url('https://thumb9.shutterstock.com/display_pic_with_logo/536575/164027042/stock-photo-simple-and-stylish-office-environment-164027042.jpg') center center / cover;  
   float: left;
   height: 942px;
   width: 1920px;  
}

.data { 
   margin-right: 20%;
   background-color: red;
   float: right;
   height: 30px;
   width: 40px;
   margin-top:580px;
   margin-left: 170px;
   position: absolute;
}