How To - 전체 페이지 이미지

w3.css

전체 페이지 이미지

CSS를 사용하여 전체 페이지 배경 이미지를 만드는 방법을 알아보자.

전체 높이 이미지를 만드는 방법

1단계) HTML 추가

컨테이너 요소를 사용하고 높이: 100%로 컨테이너에 배경 이미지를 추가한다.

⭐ 50%를 사용하여 반 페이지 배경 이미지를 만든다. 그런 다음 다음 다음 배경 속성을 사용하여 이미지를 완벽하게 중앙으로 조정하고 확장한다.

⭐ 이미지가 화면 전체를 덮는지 확인하려면 높이를 <html>과 <body>에 모두 100% 적용해야 한다.

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;
}

기본 예시

예제 보기