[CSS] IE8 이하에서 적용되지 않는 background property

[발생일]

2015.04.22 수

[문제]

background:url('...') no repeat 0% 0% / 100% 100%; 이런식으로 한 줄로 이어 쓰다 보면

background-size 속성은 IE8 이하에서 적용되지 않기 때문에 위 CSS가 통째로 적용이 되지 않아 배경 이미지까지 안보이는 현상이 발생한다.

[참고]

IE8 이하에서 적용되지 않는 background property

Property	Chrome	Internet Explorer	Firefox	Safari	Opera
background	1.0	4.0	1.0	1.0	3.5
background-attachment	1.0	4.0	1.0	1.0	3.5
background-clip	4.0	9.0	4.0	3.0	10.5
background-color	1.0	4.0	1.0	1.0	3.5
background-image	1.0	4.0	1.0	1.0	3.5
background-origin	4.0	9.0	4.0	3.0	10.5
background-position	1.0	4.0	1.0	1.0	3.5
background-repeat	1.0	4.0	1.0	1.0	3.5
background-size	4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-

[해결]

IE8 대응까지 고려한다면 clip, origin, size property는 분리하여 적는 것이 좋겠다.

ex) background:url('...') no-repeat; background-size:100% 100%;

[추가]

그라데이션(background-image:linear-gradient();) IE8에서 보여질 색상 적용