画像の操作：
背景画像のサイズを設定
指定したNodeに設定されている背景画像のサイズを変更または設定する。
Node
Nodeを渡す id値を文字列で指定してもよい
String
サイズをCSS形式の文字列で指定 (例)「100px 50px」「100vw auto」「cover」など
Number
複数の背景画像が設定されている場合の配列番号 0 = 1枚目 ・ 1 = 2枚目 … ／ 省略した場合は 0 となる
●必須引数 ●オプション引数(省略可能)
記述例
$imgSetBgSize($id('block1'), '100px 50px')
$imgSetBgSize('block1', '100vw auto' 1)
$imgSetBgSize('block1', 'cover')
動作サンプル
下のボックスの背景画像には1枚目に『水玉 (64px 32px)』、2枚目に『格子模様 (128px 64px)』が設定されている。
Sass :
#sample1 {
background:
url(../images/cmn_bg_3.svg) left top,
url(../images/cmn_bg_1.png) left top;
background-size:
64px 32px,
128px 64px;
}
Javascript :
$imgSetBgSize($id('sample1'),'128px 64px');
$imgSetBgSize('sample1','cover',0);
$imgSetBgSize('sample1','100% auto',1);
$imgSetBgSize('sample1','auto',1);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。