올해 초 WebKit은 CSS background
약식 속성의 동작을 업데이트했습니다. 이번 변경으로 background
약식 속성은 약식 선언에 설정되어 있지 않은 경우 background-size
를 기본값인 auto auto
로 재설정합니다. 이번 변경으로 Chrome 및 기타 WebKit 브라우저가 사양을 준수하게 되며 Firefox, Opera, Internet Explorer의 동작과 일치합니다.
Android용 Chrome이 WebKit의 최신 버전으로 업그레이드됨에 따라 이제 Android에도 이 변경사항이 적용됩니다. 이 문제는 webkit을 수정했기 때문에 여러 브라우저에서 테스트한 사이트는 영향을 받지 않을 가능성이 높습니다.
기존의 작업 방식
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
background
약식 속성에는 크기 속성이 없으므로 background-size
를 기본값인 auto auto
로 재설정합니다.
올바른 이미지 크기 지정 방법
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
fooB
에서 background
약식에 background-size
를 지정하려면 먼저 position
(0%)를 지정하고 그 뒤에 슬래시를 지정한 다음 background-size
(50px 40px)를 지정해야 합니다.
기존 코드 수정
이 문제를 쉽게 해결할 수 있는 몇 가지 옵션이 있습니다.
background
약식 속성 대신background-image
를 사용합니다.- 해당 요소에
background
를 설정하는 다른 CSS 규칙보다 더 높은 특정 수준으로background-size
를 마지막으로 설정하고,:hover
규칙을 확인하는 것을 잊지 마세요. !important
속성을background-size
에 적용합니다.- 크기 정보를
background
약식 속성으로 이동합니다.
보너스: 배경 이미지 오프셋
이 변경사항 외에도 백그라운드에 이미지를 배치하는 것이 더 유연해졌습니다. 이전에는 왼쪽 상단 모서리를 기준으로 이미지 위치만 지정할 수 있었지만 이제는 컨테이너 가장자리로부터 오프셋을 지정할 수 있습니다. 예를 들어 background-position: right 5px bottom 5px;
를 설정하면 이미지는 오른쪽 가장자리에서 5픽셀, 하단에서 5픽셀에 배치됩니다. JSBin의 샘플을 확인하세요.