CSS] 배경 이미지 화면에 꽉 차게 지정하기

- 브라우저 화면 크기를 조절해도 이미지가 화면에 꽉차게 지정하기

body {
    height: 100vh;
    background: url(/image/main_bg.jpg) no-repeat center;
    background-size: cover;
}

 

1. height 를 100vh 로 줘야한다. 100% 주면 안됨.
2. backgrund-image, background-repeat 으로 따로 써도 되지만,
3. 한줄이라도 줄이기 위해 background: 에 다 넣는다.
4. no-repeat은 이미지를 반복해서 나오지 않게 함.
5. center는 이미지를 가운데 배치.
6. background-size: cover를 넣는다.

 

이제 브라우저 크기를 작게 했다가 크게 해도 화면안에 그림이 계속 차있다.

 

물론 비율에 따라 그림이 점점 잘려서 보이긴 하지만,

---

 

만약 이미지 비율 그대로 작아지거나 커지길 원한다면

 

width: 100%;

height: auto;

 

두 태그를 넣으면 종횡비 유지하면서 작아지고 커진다.