大した技術ではないのですが、個人的に使えると思ったのでご紹介。
タイトルにある通り、CSS の background-image で指定した画像のサイズを変更する方法です。
コードはこちら。
// 背景画像を 30px × 30pxに指定
background-image:url("背景画像のパス");
background-size:30px;
そのものずばり、background-size というプロパティを使います。
上記のコードを追加すると、背景に指定した画像のサイズが縦横30pxで表示されます。
また、上記のようにサイズをじかに指定する以外にも、パーセント指定や、contain、cover といった値も使用できます。
パーセントの場合は、背景画像が指定された範囲に対する画像の幅と高さをパーセンテージで指定できます。
containは、画像の縦横の比率は保持して、背景の範囲に収まる最大サイズになるように画像を拡大縮小してくれます。
coverは、画像の縦横の比率を保持するところまでは、contain と同じですが、こちらは背景の範囲を完全に覆う最小サイズになるように画像を拡大縮小してくれます。
用途によって使い分けてください。
なお、画像のサイズを、縦20px 横 40pxなど、正方形でないサイズで指定したいときは、下記のように指定します。
// 背景画像を 縦20px 横 40pxに指定
background-image:url("背景画像のパス");
background-size:40px 20px;
横のサイズ 縦のサイズ、の順番で記載します。
今回は、グラフのマス目を背景画像を指定して表現するというときに、このプロパティを利用しました。
background-size を使えば、マス目の大きさを変えたいときに、元画像自体を編集することなく、CSSのみで調整することができます。
ちょっとしたことですが、意外と汎用性が高そうです。
