CSSで背景画像を切り抜き・クロップする

質問

私はこのHTMLを持っています。

<div id="graphic">lorem ipsum</div>

をこのCSSで指定します。

#graphic { background-image: url(image.jpg); width: 200px; height: 100px;}

適用している背景画像は200x100pxですが、200x50pxの背景画像の一部だけを切り取って表示したいのですが、どうすればよいでしょうか？

background-clip は、このための正しいCSSプロパティではないようです。代わりに何を使うことができますか？

background-position は使用しないでください。なぜなら、私は表示したい画像部分がCSSが定義されている要素よりも小さいスプライトコンテキストで上記のCSSを使用しているからです。

どのように解決するのですか？

独自の次元コンテキストを持つ擬似要素にグラフィックを配置することができます。

#graphic {
  position: relative;
  width: 200px;
  height: 100px;
}
#graphic::before {
  position: absolute;
  content: '';
  z-index: -1;
  width: 200px;
  height: 50px;
  background-image: url(image.jpg);
}

#graphic {
    width: 200px;
    height: 100px;
    position: relative;
}
#graphic::before {
    content: '';
    
    position: absolute;
    width: 200px;
    height: 50px;
    z-index: -1;
    
    background-image: url(http://placehold.it/500x500/); /* Image is 500px by 500px, but only 200px by 50px is showing. */
}

<div id="graphic">lorem ipsum</div>

ブラウザのサポートは良いが をサポートする必要がある場合は、シングルコロンの :before . IE は、それ以前のバージョンではどちらの構文もサポートしていません。