<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);
  position: absolute;
  left: 50px;
  top: 50px; 
  background: url("//www.w3cplus.com/sites/default/files/blogs/2016/1612/bg-position.png") no-repeat;
  
  &:nth-child(1) {
    background-position: 232.5px 55px;
  }
  
  &:nth-child(2) {   
    background-position: 75% 50%;
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.