background-image

요소의 배경에 하나 이상의 이미지를 삽입 (주로 1개만 삽입하는 경우가 많다.)

 

 

속성 값

값	의미	기본값
none	이미지 없음	none
url("경로")	이미지 경로(URL)

배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있다.

 

사용방법

.box{
  /* 개별속성 */
  background-image: url("./img/i1.jpg"),
    url("./img/i2.jpg"),
    url("./img/i3.jpg");
}

.box2{
  /* 단축속성 */
  background: url("./img/i1.jpg") no-repeat,
    url("./img/i2.jpg") no-repeat 100px 50px,
    url("./img/i3.jpg") repeat-x;
}

하나 이상의 배경 이미지를 삽입할 경우 "," 쉼표로 구분한다. 먼저 작성된 이미지가 더 위에 쌓인다. 이런 "다중 배경 이미지"는 IE8 이하 버전에 사용할 수 없다.

 

 

 

* 반복적으로 나타나는 이미지

.box{
  background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png");
  width: 750px;
  height: 500px;
  border: 2px dashed lightgray;
}

반복적으로 나타나는 이미지

요소의 크기를 지정해주었을때 만약 이미지의 크기보다 더 크다면 반복적으로 나타나는 모습을 볼 수 있다. 그래서 이것을 제어하기 위해서 no-repeat을 이용한다.

 

 

.box{
  background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png");
  background-repeat: no-repeat;
  width: 750px;
  height: 500px;
  border: 2px dashed lightgray;
}

 

반복적인 이미지가 사라졌다