I have a div with a background image

```
#test {
  background-image: url('http://image.shutterstock.com/z/stock-photo-asian-developer-using-laptop-computer-sitting-working-real-office-331439570.jpg');
  height: 400px;
  width: 400px;
  background-size: contain;
}

```

I have another child div of `test` that covers the parent `test` div

```
#cover {
  background-color: white;
  height: 400px;
  width: 400px;
}

```

**HTML**

```
<div id="test">
  <div id="cover">

  </div>
</div>

```

[JSFiddle](https://jsfiddle.net/9beeeuem/)

Is it possible to manipulate the `cover` div to show a part of the image (of `test`)? For example, to show the bottom right triangle of the image while maintaining the `cover` div over the `test` div

P.S. My approach to the problem might be wrong, css is definitely not my strong suite