css spriteの画像サイズの指定について

Question

画像を下記のような形で取得しているのですが、取得後のアイコンのサイズを指定(縮小)して表示する方法はありませんでしょうか？
元画像がバラバラのためできるだけ同じサイズで指定したいです

  background: image-url('__sprite.png') no-repeat -356px -263px;
  width: 68px;
  height: 99px;

Answer 1

background-sizeプロパティで背景画像のサイズを拡大・縮小した後, background-positionプロパティで背景画像の位置をずらせば良いです.

例えば, サイズ200x200の画像を背景とし, その一部を2倍表示するのであれば次のようになるでしょう.

div{
  /*コンテンツのサイズ*/
  width: 200px;
  height: 200px;
  /*背景画像*/
  background-image: url(bg.svg);
  /*200x200の背景画像の[100,0,100,100]の範囲を切り出して2倍表示したいのであれば*/
  /*まず画像を整数倍して*/
  background-size: 400px 400px;
  /*拡大した画像に対して基準となる座標を指定する*/
  background-position: -200px 0;
  background-repeat: no-repeat;
}