전체 화면 배경 이미지 설정 방법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자 (중급 이상)
- 인디 게임 스튜디오 웹사이트 디자이너
- CSS 기초를 이해한 개발자
- 난이도: 중간 (CSS 속성 및 뷰포트 단위 이해 필요)
핵심 요약
background-size: cover;를 사용하여 이미지가 전체 화면을 덮도록 설정height: 100vh;로 뷰포트 높이에 맞춘 컨테이너 생성- HTML 구조에서
body의margin및overflow속성 조정
섹션별 세부 요약
- 일반적인 문제점
background-size가cover로 설정되지 않아 이미지가 전체 화면을 덮지 못함body요소의 높이가100vh로 설정되지 않음- 뷰포트 높이와 요소 높이의 비율 문제
- CSS 설정 단계
body에margin: 0; height: 100vh; overflow: hidden;적용background-image,background-size: cover;,background-position: center;속성 조합position: fixed; z-index: -1;으로 배경 이미지 레이어 설정
- 추가 팁
rgba()값으로 반투명 오버레이 생성 (overlay클래스)contain대신cover사용 권장 (이미지 비율 유지)- 뷰포트 크기별 반응성 테스트
결론
- background-size: cover;와 height: 100vh; 조합을 통해 반응형 전체 화면 배경 생성
- 오버레이(rgba()) 사용으로 텍스트 가독성 향상
- 뷰포트 크기별 테스트 필수 (이미지 자르기 및 비율 문제 예방)