![[CSS] background img 꽉차게 채우는 법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNODYy%2FbtrxbO2iFzg%2FZDXtHMWsuKpR5lUSn05lFk%2Fimg.png)
배경 이미지를 화면에 꽉 차게 채워야 하는 경우가 종종 있다. 원하는 조건은 다음과 같다.
- 화면에 보이는 전체 페이지를 여백 없이 이미지로 채우기
- 필요에 따라 이미지 크기 조정
- 이미지의 중앙 부분
- no 스크롤바
여러 방면으로 시도해 본 결과 2가지 방법이 가장 유용했다.
1. <html> 태그 이용하기
html {
background: url(img.jpg) no-repeat center fixed;
background-size: cover;
}<html>태그는 최소한 브라우저 창의 높이다.backgroun속성은 background에 관련된 속성 값을 한 번에 적을 수 있다.- 순서대로
background-repeat,background-position,background-attchment background-size: cover;는 따로 적어준다.<body>태그에 적용해도 무방하다.
2. <div> 태그 이용하기
body {
margin: 0;
}
.wrap {
background: url(img.jpg) no-repeat center fixed;
background-size: cover;
height: 100vh;
}- 전체 내용을
<div>태그로 감싸고 class 값을 부여한다. (여기서는 class="wrap") - 주의할 점은
<body>태그가 기본으로 가지는 margin 값을 0으로 설정해주어야 한다. <div>태그에 높이 설정이 되어 있어야 한다. 100vh는 뷰포트 기준 전체 페이지다.- 그 외에 나머지 태그는 1번과 동일하다.
추가로 반응형 작업 혹은 콘텐츠의 양이 많아 스크롤이 생기는 경우,
적용된 height 값이 뷰포트 기준이기 때문에 아래쪽으로 여백이 생겨버린다.
이럴 때는 min-height: 100vh; 를 적용하면 간단하게 해결된다!
'🌎 Web > CSS' 카테고리의 다른 글
| [CSS] 수직 정렬의 3가지 방법(padding, line-height, position) (0) | 2022.03.28 |
|---|---|
| [CSS] background-size, origin, clip (0) | 2022.03.27 |
| [CSS] CSS에서 위치를 담당하는 요소들 (0) | 2022.03.23 |
| [CSS] CSS에서 공간을 나누는 요소들(feat. 박스모델) (0) | 2022.03.21 |
| [CSS] CSS의 기본 속성(property) (0) | 2022.03.21 |