Style backgroundSize 속성

정의와 사용법

backgroundSize 속성 설정 또는 배경 이미지 크기를 반환합니다.

추가 참고:

HTML 스타일:background 속성

CSS 튜토리얼:CSS 배경

CSS3 튜토리얼:CSS3 배경

CSS 참조 매뉴얼:background-size 속성

예제

배경 이미지 크기를 지정합니다:

document.getElementById("myDIV").style.backgroundSize = "60px 120px";

본인이 직접 시도해보세요

문법

backgroundSize 속성 반환:

object.style.backgroundSize

backgroundSize 속성 설정:

object.style.backgroundSize = "auto|length|cover|contain|initial|inherit"

속성 값

값 설명
auto 기본 값. 배경 이미지는 너비와 높이를 포함합니다.
length

배경 이미지의 너비와 높이를 설정합니다.

첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다.

값이 하나만 주어지면 두 번째 값은 "auto"로 설정됩니다.
percentage

부모 요소의 퍼센트로 배경 이미지의 너비와 높이를 설정합니다.

첫 번째 값은 너비를 설정하고 두 번째 값은 높이를 설정합니다.

값이 하나만 주어지면 두 번째 값은 "auto"로 설정됩니다.
cover

배경 이미지를 가능한 가장 크게 확대하여 배경 영역이 배경 이미지로 완전히 덮여야 합니다.

배경 이미지의 일부는 배경 위치 영역 내에 없을 수 있습니다.
contain 이미지를 최대 크기로 확대하여 내용 영역에 맞게 가로 및 세로 크기를 설정합니다.
initial 이 속성을 기본 값으로 설정합니다. 참고: initial.
inherit 부모 요소에서 이 속성을 상속합니다. 참고: inherit.

기술 세부 사항

기본 값: auto
반환 값: 문자열로 요소의 background-size 속성.
CSS 버전: CSS3

브라우저 지원

backgroundSize CSS3 (1999) 기능입니다.

모든 브라우저는 완전히 지원합니다:

크롬 에지 파이어폭스 사파리 오페라 IE
크롬 에지 파이어폭스 사파리 오페라 IE
지원 지원 지원 지원 지원 11