Properties

Properties

Draft
  • account_tree
  • bug_report

background-size

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

설정 가능한 속성 값

  • auto기본값키워드CSS3

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

  • length숫자단위허용CSS3

    배경 이미지의 크기를 px 단위를 이용한 절대 크기로 또는 % 단위를 이용한 요소의 크기의 비율에 따라 지정할 수 있다.

    • 사용 가능한 단위: px, %
  • cover키워드CSS3

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

  • contain키워드CSS3

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

  • initial키워드CSS3

    CSS 기본 값으로 처리한다.

구문

  • background-size auto or length or cover or contain or initial;기본형식CSS3

    배경 이미지의 크기를 주어진 상수 또는 절대 및 요소에 대한 상대 크기로 지정할 수 있다.

  • object.style.backgroundSize = "60px 120px";자바스크립트 형식CSS3

    자바스크립트 형식

테스트 도구

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

지원 웹브라우저