CSS vendor prefix

background-image

background-image는 배경 이미지를 넣을 때 쓰는 속성입니다. 어떤 요소에 배경 이미지를 넣으면 padding을 포함하여 배경을 채우게 됩니다. (margin은 제외) 기본값으로, 배경 이미지는 상단 왼쪽에 위치(top-left)하며, 가로 세로 반복적으로 배열 됩니다. 상속여부:none 이미지가 제데로 표시되지 않을 경우에 대비하여 background-color(배경색)도 같이 지정하는게 좋습니다.

기본 문법
background-image: url('rabbit.png'); background-color: #D9E5FF;

url('') 따옴표 안에 이미지가 위치한 주소를 적습니다. 여러 이미지를 사용할 경우 쉼표로 분리합니다.

사용 예
#header { background-image: url('rabbit.png'), url('nero.png'); }

이미지 크기 변경

backgound-size: 300px 150px //가로 300픽셀 세로 150픽셀

특별한 값: "contain"과 "cover"

contain

contain 값을 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정됩니다. 이미지의 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같습니다.

background-size: contain;

cover

값을 cover 로 지정하면 배경이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정합니다. 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같습니다.

background-size: cover;

이미지 스프라이트(image Sprite)

이미지 스프라이트란 배경이미지를 적용할 경우 각각의 요소에 들어가는 배경이미지를 낱개로 만들지 않고 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에 background-position을 이용하여 배경이미지를 배치하는 방법입니다. 이미지가 많은 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 시간이 오래 걸릴 수 있습니다. 이미지 스프라이트를 사용하면 서버 요청 수가 감소하고 대역폭아 절약됩니다.