background-size

정의 및 사용

background-size 는 배경이미지의 크기를 조절할 수 있는 속성이다.

정의 및 사용
기본값 auto
상속 no
버전 CSS3
자바스크립트 구문 object.style.backgroundSize=”60px 80px”

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원Opera 지원Safari 지원

IE 브라우저 외 모두 지원 (IE 계열은 9 부터 지원)

구문

속성 값 설명
설명
length width, height 값을 직접 지정. 하나만 지정할 경우 나머지는 auto 값을 적어준다
percentage 배경이미지를 포함한 영역의 % 값을 계산하여 width, height 값을 지정
cover 해당 영역 안에 빈 공간이 없이 배경이미지를 리사이징 한다. 만약 배경이미지의 비율과 영역의 비율이 맞지 않는 경우 넘쳐나는 이미지 영역은 짤리게 된다.
contain 해당 영역 안에서 이미지가 짤리지 않게 비율을 맞춰 리사이징 한다. 이 경우에는 배경이미지의 비율과 영역의 비율이 맞지 않으면 영역에 빈공간이 생기게 된다.

예제

예제 보기

버그 및 이슈

소제목

목록 으로

댓글