• このエントリーをはてなブックマークに追加

10×10のグリッドのサンプル例。

HTML

input{
background: url(images/icon-arr-btn.png) no-repeat calc(100% - 20px) 50%, linear-gradient( #00c, #00f);
background-size: auto, cover;
}

calc(100% – 20px) 50%のところがみそですね。calcでX軸の位置・50%でY軸の位置。calcを組み合わせればpaddingなどの調整や100%としたい時に可変の位置となるときは便利。2つ数値を指定する必要があるので、どちらもcalcを指定するときは、calc() calc()となる。
各数値は半角空白で区切る。

url(images/icon-arr-btn.png) no-repeat calc(100% - 32px) 50%

各数値は半角空白で区切る。いくつもの値を盛り込むとわけわからなくなるけど、注意深く見て探す、あるいは、background-position・background-size・background-repeatなどをそもそも分けて記述すれば良いかも。

各数値は半角空白で区切る。いくつもの値を盛り込むとわけわからなくなるけど、注意深く見て探す、あるいは、background-position・background-size・background-repeatなどをそもそも分けて記述すれば良いかも。

背景2個以上同時に指定するときは自分がもっとも理解しやすい記述で書いたほうがいい。まとめてかけたことに越したことはないけど、どこだろ?どこだろ?で時間かけて悩むのはもったいない。

background-positionとかbackground-sizeや他の記述も分けたほうが見やすい。またインデントを付けるのも良いかもしれない。改行も見やすくするための工夫かも。