W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:Kyrr6y さんの質問

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

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

■やりたいこと
スプライトシートで縦に並べた画像のうち一つを、サイトの親要素(ブロック要素)内のサイズに合わせて縮小微調整して表示したい
(スプライト: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自体を消すと再び表示されます。

宜しくお願いします。

みんなの回答 1 件

ID:H.qUcm さんの回答

background-size変えたらpositionの値もいじりなさい

ID:gZdtEr

回答ありがとうございます!
解決出来ました。

最終更新日:2017-01-13 (671 views)

関連するトピックス

ページ上部に戻る