スプライトシート画像の表示に関して質問があります。

下記"■コード"のように書いたのですがなぜか画像が思うように表示されません。
丸一日試行錯誤したのですが解決できずに困っています。
ご指摘をお願いできれば助かります。

■やりたいこと
スプライトシートで縦に並べた画像のうち一つを、サイトの親要素（ブロック要素）内のサイズに合わせて縮小微調整して表示したい
（スプライト：w100px h60px→サイト：w50px h30pxで表示）

■コード
//html
<h1>
<a></a>
</h1>

//css
h1{
width:50px;
height:30px;
}
a{
display:block;
width:100px;
height:60px;
background-image:url("img/...省略");
background-position:0 -100px;
background-size:cover;
}
■確認環境
iphoneのsafari・PCのchrome

■あやしい挙動
a{}にbackground-sizeの値(pxでも%でもcontainでもcoverでも)を書くと画像が消えてしまいます。
background-size自体を消すと再び表示されます。

宜しくお願いします。