CSS) background-image

1) background-image

요소의 배경에 하나 이상의 이미지를 삽입

속성 값

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

 

사용법

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

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

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

.box1 {
	/* 개별속성 */
	background-image: url("../img/image1.jpg"),
    	url("../img/image2.jpg"),
        url("../img/image3.jpg");
}
.box2 {
	/* 단축속성 */
    background: url("../img/image1.jpg) no-repeat,
    url("../img/image2.jpg") np-repeat 100px 50px,
    url("../img/image3.jpg") repeat-x;
}

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

 

1. 다중이미지 삽입

html

<div class="box"></div>

css

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

출력결과

※ background-image는 다중 이미지를 삽입할 때 먼저 생성되는 요소가 위에 생성되는 것을 확인 할 수있다.

 

2. 이미지 반복

html

<div class="box1"></div>
<div class="box2"></div>

css

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

출력결과

※ box1처럼 이미지의 크기보다 큰 width, height를 가지게 되면 기본적으로 반복되어 출력되게 된다. 반복을 없애기 위해서는 box2에 background-repeat: no-repeat; 속성을 추가해주면 된다.