background-size

배경 이미지의 크기를 지정

 

 

속성값

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

 

 

1. 세로 크기를 지정할 필요 없다.

.box{
  width: 400px;
  height: 300px;
  border: 4px solid red;
  margin: 50px;
  background-image: url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-repeat: no-repeat;
  background-size: 200px;
}

만약 세로 길이도 지정을 했는데 이미지가 찌그러졌다. 그리고 세로길이의 비율을 못 맞추겠다 하면, 가로 길이만 지정해도 된다.

 

2. cover 및 contain

cover는 이미지가 짤릴 수 있으며, 요소의 넓은 너비에 맞춰진다. contain은 배경 이미지의 크기 비율을 유지하며 이미지가 잘리지 않지만, 빈공간이 생길 수 있다.

 

 

 

---> 모르겠으면 한번 실습해보깅. 이미지 올리기 넘 힘들어