[Tip] background로 이미지를 넣을 경우 익스플로러에서 흐릿하게 뭉개지는 현상

코딩을 완료 후, 크롬에서는 아무 이상이 없었던 background의 이미지가 익스플로러에서 흐릿하게 뭉개지는 현상이 있었습니다.

css를 잘못 입력했나 이것저것 입력해봤는데 소용이 없더라구요.

구글링해보니 저와 같은 문제를 겪은 분이 계셨고, 그 분이 남기신 url로 들어가보니 왜 이런 문제가 생기는 지 알 수 있었는데요.

제 경우는 이미지보다 작은 엘리먼트에 해당 이미지를 background-image로 설정해서 발생한 버그였었습니다.

다행히도 이미지를 엘리먼트에 맞게 크롭하니 익스플로러에서도 이미지가 제대로 나오는 것을 확인할 수 있었구요.

(position을 center로 두는 것도 버그에 포함될 수도 있다고 하는데 이 부분은 참고로 알아두면 좋을 것 같습니다.)

이미지를 통째로 background로 넣기보다 이미지에 텍스트나 따로 뺄 수 있는 이미지 레이어가 있다면 분리해서 

background로 넣을 때 분리해서 넣는 것이 좋을 것 같다는 생각이 들었습니다.

... 꼭 크롬에서는 괜찮다고 여기면 늘 익스플로러에서 말썽이니;;

저만 번거롭게 느껴지는 걸까요. 크로스브라우징 체크는 기본이라고는 하지만

뭔가 손이 두번 세번 더 가는 기분이 들고 여간 번거로운게 아니네요.

++ 근래에 같은 버그가 또 생겨서 이유를 살펴보니 Element에 width 값을 주지 않아서 이미지가 흐릿하게 보이더라구요. 

위 방법으로 안될 시에는 width값을 주는 것도 방법이 될 것 같습니다.

* 참고 사이트 

- http://www.i-swear.com/956

- http://connect.microsoft.com/IE/feedback/details/810354/ie11-css-background-image-show-blur