相对于特定图像点的元素，其背景大小为：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;
}