css sprite
cssｽﾌﾟﾗｲﾄを作成するためのツール
https://bl6.jp/web/webservice/css-sprite-generator/
＜cssｽﾌﾟﾗｲﾄ使用例＞
<!DOCTYPE html>
<meta http-equiv="x-ua-compatible" content="IE=7">
<html lang="ja">
<head>
<meta charset="utf-8">
<!--参考：https://www.webcreatorbox.com/tech/css-sprite/-->
<style type="text/css">
html {
height:90%;
width:90%;
}
a.sample_spritemenu{
background: url(images/icon.png);
width:40px;
/* padding-top:10px;を使用しているため、
画像の高さ（40px）からpadding-top（10px）を引いた値（30px）と設定
backgroundのheightはpaddingを含むため。
*/
height:30px;
display: block; /* 画像全体がリンク範囲 */
cursor:pointer; /* マウスカーソルの形状 */
padding-top:10px;
text-align:center;
color:#FF0000;
outline: 2px solid skyblue;
}
a.sample_spritemenu:hover{
/*background-position:bottom;*/ /* 背景画像の表示開始位置を指定する */
background-position:40px 40px;
}
</style>
<title>ページのタイトル</title>
</head>
<body>
コンテンツ
<a href="#">ｽﾌﾟﾗｲﾄ</a>
</body>
</html>
ボックスの幅によって可変にCSSｽﾌﾟﾗｲﾄの画像の高さと幅をかえる方法
https://blog.manaten.net/entry/responsive_css_sprite