[CSS] background-image

 

▶ background-image

- 요소의 배경에 하나 이상의 이미지 삽입.
- 하나의 이미지만 삽입하는 것이 보통이지만 하나 이상을 삽입할 수도 있음.

 

[속성 값]
- none: 이미지 없음. 기본값
- url("경로"): url() 함수의 인자 값으로 경로를 지정.

 

 

[사용 방법]

background-image: url("경로");

 

[사용 예시]

.box{
  background-image: url("../image.jpg");
  width: 100px;
  height: 100px;
}

// 개별 속성 사용 예시
.box{
  background-image: url("../image1.jpg"),
  url("../image2.jpg"),
  url("../image3.jpg");
}

// 단축 속성 사용 예시
.box{
  background: url("../image1.jpg") no-repeat,
  url("../image2.jpg") no-repeat 100px 50px,
  url("../image3.jpg") repeat-x;
}

- 둘 이상의 이미지를 넣는 경우 쉼표(,)로 구분.

- 먼저 작성된 이미지가 더 위에 쌓임.

- 다중 배경 이미지는 IE8 이하의 버전에서는 지원 불가.

 

 

- background-image 사용 시 <img>를 사용하는 것과는 달리 width/height 같은 크기를 지정해줘야만 이미지가 화면에 출력됨.
  - <div>가 사용된 현재 요소는 block 요소이므로 width: 100%, height: 0px로 출발하기 때문에 화면상에 출력되지 않음.
  - 요소의 크기가 있어야만 그 크기 내부에서 특정한 배경으로 이미지가 보일 수 있는 것.

 

 

---

[다중 이미지 넣기]

 

- 다중 이미지 삽입 시 먼저 작성한 이미지가 가장 위에 쌓임.

 

 

 

- .box의 크기를 키움.

- 기본적으로 background-image를 통해 이미지를 삽입하면 그 이미지는 요소의 범위 내에서 왼쪽 상단을 기준으로 반복적으로 출력됨.

 

 

 

- background-repeat: no-repeat;을 통해 한 번만 출력되도록 제어 가능.