CSS) background-size

1) background-size

배경 이미지의 크기를 지정

속성 값

값	의미	기본값
auto	배경 이미지가 원래의 크기로 표시됨	auto
단위	- px, em, % 등 단위로 지정 - width height 형태로 입력 가능(E.g. 120px 370px) - width 만 입력하면 비율에 맞게 지정됨(E.g. 120px)
cover	- 배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐 - 이미지가 잘릴 수 있음
contain	- 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 - 이미지가 잘리지 않음

 

사용법

html

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

css

.box1 {
  width: 300px;
  height: 200px;
  border: 2px solid red;
  margin: 50px;
  background-image: url("https://heropy.blog/css/images/logo.png");
  background-repeat: no-repeat; 
  background-size: cover;
}
.box2 {
  width: 300px;
  height: 200px;
  border: 2px solid red;
  margin: 50px;
  background-image: url("https://heropy.blog/css/images/logo.png");
  background-repeat: no-repeat; 
/*   background-size: cover; */
  background-size: contain;
}
.box3 {
  width: 300px;
  height: 200px;
  border: 2px solid red;
  margin: 50px;
  background-image: url("https://heropy.blog/css/images/logo.png");
  background-repeat: no-repeat; 
  background-size: 100px;
}

※ 1번째 이미지(.box1) ▷ background-size: cover; 가로, 세로너비중 긴 쪽을 기준으로 배경이미지의 크기를 만든다.
2번째 이미지(.box2) ▷ background-size: contain; 가로, 세로너비중 짧은 쪽을 기준으로 배경이미지의 크기를 만든다.
3번째 이미지(.box3) ▷background-size: 100px; 가로, 세로 너비를 직접 지정한다. 비율대로 출력하기 위해서는 가로 너비만 지정하는 것을 추천한다.

출력결과