어떻게 만드는가: 전체 페이지 이미지

CSS를 사용하여 전체 페이지 배경 이미지를 만들어보세요.

전체 페이지 이미지

브라우저 창 전체를 덮는 배경 이미지를 만들어보세요. 다음 예제는 전체 화면(반화면)의 반응형 배경 이미지를 보여줍니다:

시연 - 전체 페이지 배경 이미지

시연 - 반페이지 배경 이미지

전체 높이 이미지를 어떻게 만드는가

컨테이너 요소를 사용하고, 그 컨테이너에 높이가 100%인 배경 이미지를 추가합니다.

팁:50%를 사용하면 반페이지 배경 이미지를 생성할 수 있습니다. 그런 다음 다음 배경 속성을 사용하여 이미지를 완벽하게 중앙에 배치하고 확대합니다:

주의:이미지가 전체 화면을 덮을 수 있도록 보장하기 위해 다음과 같이 설정해야 합니다: height: 100% 동시에 적용됩니다 <html> 과 <body>:

전체 페이지 배경 이미지:

body, html {
  height: 100%;
}
.bg {
  /* 사용된 이미지 */
  background-image: url("dancer.jpg");
  /* 전체 높이 */
  height: 100%;
  /* 중앙에 잘 정렬되고 이미지를 확대합니다 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

직접 시도해 보세요

반페이지 배경 이미지:}

.bg {
    height: 50%;
}

직접 시도해 보세요