
背景画像の位置を右や下を基点に指定する
2014年12月11日CSSテクニック
対応ブラウザは限られていますが、background-positionプロパティの数値の前にrightやbottomを書き加えることで、背景画像の位置を右や下を基点に指定することが可能です。
HTML
<nav id="nav"> <span class="btn" id="prev"><a href="#">prev</a></span> <span class="btn" id="next"><a href="#">next</a></span> </nav>
CSS
#nav { text-align: center; } .btn { display: inline-block; margin: 0 6px; } .btn a { border-radius: 4px; border: 1px solid #ffffff; padding: 12px 50px 12px 50px; background-color: #52d3ff; background-repeat: no-repeat; text-decoration: none; color: #ffffff; } #prev a { padding-left: 60px; background-image: url(ico_prev.png); background-position: 10px 50%; } #next a { padding-right: 60px; background-image: url(ico_next.png); background-position: right 10px bottom 50%; }