Edit on
<div></div>
<div></div>
body {
  height: 100vh;
  width: 100vh;
  background: #eee url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill-opacity=".25" >\
            <rect x="20" width="20" height="20" />\
            <rect y="20" width="20" height="20" />\
            </svg>');
  background-size: 20px 20px;
}
div {
  width: 410px;
  height: 210px;
  border: 10px solid rgba(red, .5);
  background: url("//www.w3cplus.com/sites/default/files/blogs/2016/1612/bg-position.png") no-repeat;
  
  &:before {
    content: '';
    width: 10px;
    height: 10px;
    background: green;
    z-index: 2;
  }
  
  &:nth-child(1) {
    position: absolute;
    left: 50px;
    top: 50px; 
    background-position: 10px 10px;
    
    &:before {
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }
  
  &:nth-child(2) {
    position: absolute;
    left: 50px;
    top: 50px; 
    background-position: center;
    
    &:before {
      position: absolute;
      top: 100px;
      left: 200px;
    }
  }
  
}
View Compiled
Rerun