Properties

Properties

Editing
  • account_tree
  • bug_report

background-size

요소에게 적용될 배경 이미지의 크기를 지정한다.

사용 가능한 값 타입

〈bg-size〉

<background-size> 속성에 사용하는 값의 타입이다.

사용되는 키워드

  • contain

    배경 이미지의 비율을 유지하면서 어느쪽도 잘리지 않도록 비율에 따라서 요소의 가로 또는 세로에 꽉 차게 맞춘다. 따라서 요소의 가로와 세로 중 어느 한 방향은 배경 이미지가 미치지 않은 빈 곳이 생길 수도 있다.

  • cover

    배경 이미지의 비율을 유지하면서 요소 내에 꽉 차게 보여 준다. 따라서 요소의 크기에 따라 배경 이미지의 가로와 세로 방향 중의 어느 한 곳은 일부 잘려 보이지 않을 수 있다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

사용되는 전역 키워드

다음 전역 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • auto

    CSS 속성에 따라 정해진 값으로 처리한다. 속성에 따라 auto가 갖는 값의 의미는 다르므로 반드시 해당 속성에서의 값이 의미하는 내용을 확인해야 한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • autoCSS3

    배경 이미지의 크기를 원래의 크기로 설정하여 요소의 크기와 관계없이 보여 준다.

구문

  • background-size 〈length-percentage〉 | auto | cover | contain;CSS3
  • object.style.backgroundSize = "60px 120px";CSS3

    자바스크립트 형식

테스트 도구

배경 이미지의 크기 설정 결과

지원 웹브라우저