방법 - 전체 페이지 이미지
CSS로 전체 페이지 배경 이미지를 만드는 방법을 알아보세요.
전체 페이지 이미지
전체 브라우저 창을 덮는 배경 이미지를 만드는 방법을 알아봅니다. 다음 예는 전체 화면(및 절반 화면) 반응형 배경 이미지를 보여줍니다.
전체 높이 이미지를 만드는 방법
컨테이너 요소를 사용하고 로 컨테이너에 배경 이미지를 추가합니다 height: 100%
.
팁: 절반 페이지 배경 이미지를 만들려면 50%를 사용하십시오. 그런 다음 다음 배경 속성을 사용하여 이미지를 완벽하게 중앙에 맞추고 크기를 조정합니다.
참고:height: 100%
이미지가 전체 화면을 덮도록 하려면 <html> 및 <body> 에도 적용해야 합니다 .
예시
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
절반 페이지 배경 이미지:
예시
.bg {
height: 50%;
}