[CSS] Background image x px from right edge

Q. https://stackoverflow.com/questions/11360799/background-image-x-px-from-right-edge/11361171#11361171

A. http://www.w3.org/TR/css3-background/#the-background-position

background-position은 알고 있었으나 아래 9가지 정도로만 쓰고 있었다.

left top	center top	right top
left center	center center	right center
left bottom	center bottom	right bottom

[표1] background-position 속성

그런데, 오른쪽에서 5px 정도만 배경이 이동했으면 좋겠는데 방법을 몰라 찾아보았더니 생각보다 간단했다.

The following declarations give the stated (horizontal, vertical) offsets from the top left corner:

하.지.만 모바일로 확인해보니 특정 기기에서 [표1]은 정상출력되는데 right 5px center 이런 방식은 안보이는 버그가 있었다.

안드로이드 4.3에서는 보이지 않고, 4.4.2에서는 정상출력되었다.

http://caniuse.com/#feat=css-background-offsets

위 정보에 따르면 안드로이드 4.3 이하 버전에서는 보이지 않는단다.

결국..... 그냥 배경 자체에 여백을 준 이미지를 사용했다.

배경이미지가 들어가는 부분을 아예 <span>으로 싸서 width 값을 fix 한 뒤, button에 배경을 넣었다.

참고 : http://m.me.naver.com/config/noti/service.nhn?prevPage=noti

widht 25px로 오른쪽 끝에 위치하게 한 뒤,

그 영역 안에서 정중앙에 오도록 background-position:50% 50%; 적용