올해 초 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-size를 마지막으로 설정하고 해당 요소에background를 설정하는 다른 모든 CSS 규칙보다 특수성이 높게 설정합니다.:hover규칙을 확인하는 것도 잊지 마세요.!important속성을background-size에 적용합니다.- 크기 조절 정보를
background약어 속성으로 이동합니다.
보너스: 배경 이미지 오프셋
이 변경사항 외에도 이제 배경 내에서 이미지를 더 유연하게 배치할 수 있습니다. 이전에는 왼쪽 상단에서 상대적인 이미지 위치만 지정할 수 있었지만 이제는 컨테이너 가장자리에서의 오프셋을 지정할 수 있습니다. 예를 들어 background-position: right 5px bottom 5px;를 설정하면 이미지가 오른쪽 가장자리에서 5픽셀, 하단에서 5픽셀 떨어진 위치에 배치됩니다. JSBin의 샘플을 확인하세요.