css - background-size と background-repeat はどのように機能しますか?

Question

ここに例があります。背景画像をトリミングし、トリミングした画像をより大きな（サイズの）要素の背景として使用したいと思います。つまり、div はその背景よりも大きく、繰り返しは必要ありません。background-repeatがコメント解除されると、要素が消えます。しかし、トリミングされた繰り返されない背景が表示されると思いました。

#div {
  background-image: url(http://dummyimage.com/600x400/000/fff);
  padding: 10px;
  width: 100px;
  height: 100px;
  background-position: 0px -100px;
  background-size: 100px 100px;
  background-repeat: no-repeat;  /*comment this*/
  position: absolute;
}

<div id="div"></div>