background-image 속성

속성 background-image는 요소의 배경 이미지를 설정합니다. 기본적으로 이미지는 자신의 복사본으로 전체 블록을 타일링하지만, 이 동작은 속성 background-repeat를 사용하여 취소할 수 있습니다.

구문

선택자 {
	background-image: url(이미지 경로);
}

선택자 {
	background-image: none;
}

값

값	설명
`url`	이미지 파일의 경로입니다. 이미지 이름은 큰따옴표, 작은따옴표로 묶거나 전혀 묶지 않을 수 있습니다.
`none`	요소의 배경 이미지를 제거합니다.

기본값: none.

예제

background-image를 사용하여 배경 이미지를 설정하고, background-repeat 속성을 사용하여 반복을 금지합니다:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

예제

background-repeat 없이 배경 이미지는 전체 블록을 타일링합니다:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

예제

배경 이미지를 설정하는 동시에 background-color를 사용하여 배경색을 설정할 수 있습니다. 이 경우 배경 이미지가 없는 곳에 배경색이 나타납니다:

<div id="elem"></div>

#elem {
	background-color: orange;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

참고

속성 background,
배경에 대한 단축 속성입니다.