CSS / background-origin - 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

개요

HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다.

  • 기본값 : padding-box
  • 상속 : No
  • 애니메이션 : No
  • 버전 : CSS Level 3

문법

  • border-box : 테두리 영역 왼쪽 위부터 채웁니다.
  • padding-box : 안쪽 여백 영역 왼쪽 위부터 채웁니다.
  • content-box : 내용 영역 왼쪽 위부터 채웁니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

background-origin 속성은 채우기를 시작하는 위치를 정하는 것으로, 다른 영역을 채우지 않는 것은 아닙니다. 배경 이미지를 반복시키면 시작점 바깥의 영역도 채웁니다. 예제 2에서 확인하세요.

예제 1

속성 값에 따라 어디서부터 채우는지 확인하는 예제입니다.

예제 2

속성값에 관계없이 배경 이미지를 반복 시키면 테두리 영역과 그 안쪽 영역을 다 채웁니다. 채우기 시작하는 위치만 달라집니다.

다음은 위 예제에서

를 삭제했을 때의 결과입니다.

브라우저 지원

  • Chrome : 4.0+
  • Firefox : 4.0+
  • Internet Explorer : 9.0+
  • Opera : 10.5+
  • Safari : 3.0+