모바일 WebKit 브라우저에 CSS 배경 약식 제공

올해 초 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의 샘플을 확인하세요.