[Web] 배경 이미지 크기 조정하기, background-size

배경 이미지 크기 조정하기, background-size

포스트 난이도: HOO_Middle

---

# backgorund-size

 

링크를 통해서 배경 이미지를 가져온다면 사이즈마다 조정이 필요할 수 있다. 특히 원래 목적이 배경 이미지로 사용하기 위한 이미지가 아닌 로고와 같이 다른 용도의 이미지인 경우에는 사이즈 조정을 해줘야 그나마 봐줄만하다. 글쓴이처럼 웹 전문가가 아닌 이상 일일이 사이즈 조정이 귀찮기 때문에 cover나 contain 기능을 사용하면 쉽게 자동 조정이 된다. 그래도 나름 사이드 프로젝트 느낌도 나고 어쩌다가 웹을 건드려야할 때에는 왠지 모르게 신이 나는 건 글쓴이 또한 어쩔 수 없는 개발쟁이인가 보다.

.bgimg {
  background-position: center;
  background-size: contain;
  background-image: url(" ");
  min-height: 100%;
}

배경 이미지 블록이며 안에 보면 position이랑 size를 지정해 준 걸 알 수 있다. 여기서 size 부분을 contain으로 둘지 cover로 둘지 보고 결정해서 사용하면 된다.

.bgimg {
  background-position: center;
  background-size: cover;
  background-image: url(" ");
  min-height: 100%;
}

굳이 사이즈 조정을 원한다면 px로 해서 수치를 입력해 주면 쉽게 조정이 가능하다.

---