파이어폭스 firefox에서 background-position 속성 적용 안될 경우

크로스 브라우징 작업을 하던중에 Firefox에서 background-position값 중 일부가 적용이 안되는 부분을 발견했습니다. Chrome(크롬)에서는 잘 되던 속성인데 말입니다... 알아보니 이 속성은 표준 CSS 속성이 아니더군요. 그래서 Opera와 Firefox에서는 바꾸어 사용해야합니다.

* background 관련 파이어폭스 사용가능 속성

1. background: .... ( O )
2. background-position: .... ( O )
3. background-position-x: .... ( X )
4. background-position-y: .... ( X )

결론부터 얘기하자면 FireFox에서 적용되기 위해 background-position-x와 background-position-y는 사용을 안하는게 좋을 것 같습니다. 대체할수 있는 코드는 아래처럼 사용해야 할 것입니다.

1. background-position-x: 50%; 의 경우
; background를 사용해 전체를 기술하거나 아래처럼 x, y값을 기술하는 방법이 최선입니다.



위처럼 사용하려면 y값도 할 수 없이 명시해야하겠죠.