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

개요

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

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

문법

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

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

예제 1

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        box-sizing: border-box;
        width: 100%;
        height: 150px;
        margin: 20px 0px;
        padding: 20px;
        border: 20px dotted #dadada;
        background-image: url( "images/jb-bg-01.jpg" );
        background-repeat: no-repeat;
        color: blue;
      }
      .a {
        background-origin: border-box;
      }
      .b {
        background-origin: padding-box;
      }
      .c {
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <p><code>background-origin: border-box;</code></p>
    <div class="a">Lorem Ipsum Dolor</div>
    <p><code>background-origin: padding-box;</code></p>
    <div class="b">Lorem Ipsum Dolor</div>
    <p><code>background-origin: content-box;</code></p>
    <div class="c">Lorem Ipsum Dolor</div>
  </body>
</html>

예제 2

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

다음은 위 예제에서

background-repeat: no-repeat;

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

브라우저 지원

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

Related Posts

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / Flex / flex-direction

CSS / Flex / flex-direction

flex-direction으로 Item의 배열 방향을 정합니다. 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { height: 400px; padding: ...

CSS / color / 글자 색 정하는 속성

CSS / color / 글자 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 여백 / padding, margin

CSS / 여백 / padding, margin

여백에는 안쪽여백과 바깥여백이 있습니다. 안쪽여백은 padding 속성으로, 바깥여백은 margin 속성으로 정합니다. 속성값 부여하기 padding과 margin 속성에 값을 부여하는 방법은 다음과 같습니다. padding: xx yy zz ww; margin: xx yy zz ww; xx는 위, yy는 오른쪽, zz는 아래, ww는 왼쪽 여백입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

개요 font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-variant: normal | small-caps | initial | inherit normal : 소문자를 작은 대문자로 바꾸지 않습니다. small-caps : 소문자를 작은 대문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype ...

CSS / 표(table) 꾸미기 / 크기 정하기

CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...

CSS / Flex / align-items

CSS / Flex / align-items

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...