[수업노트](20.11.19)D+30 클래스 101 상단로고 검색바/ 배경이미지 비율유지 크기조정

※ 배경사진비율 유지하며 크기조절

 - 내용없는 div요소 만들어 준다

div {
  width:500px;
  height:500px;
  background-image:url(https://i.picsum.photos/id/255/500/700.jpg?hmac=PLRCGHdClY_GLysZ3b70mZXd1ZhIQgbwwbBN_9P2x4I);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

이미지를 배경이미지로 지정하여 일정크기 이상으로 키우면 바둑판 배열이 되는데,

이때 background-repeat:no-repeat;속성값을 주면 바둑판배열되지 않는다.

다만 이미지가 부분 잘려서 나오는데

background-position:100%(좌우위치)50%(가운데 위치);

background-size: 100%(너비)auto(높이) 또는 cover(가득채우기) 또는 contain(비율유지하며 가득채우기)