background-image 속성

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

구문

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

css선택자 {
  background-image: none;
}

값

기본값: none.

예제

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

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

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

Результат:

예제

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

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

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

Результат:

예제

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

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

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

Результат:

참고