CSS의 중앙 배경 이미지

CSS 배경으로 사용하는 이미지를 중앙에 배치하려면 background-position: center를 설정합니다. 이미지가 컨테이너를 채워야 한다면 background-size: cover를 추가하세요. 이 값은 이미지의 종횡비를 유지하면서 가장자리를 자를 수 있습니다. 이미지가 타일처럼 반복되지 않고 하나만 표시되게 하려면 background-repeat: no-repeat을 설정하세요. 이 속성들은 서로 다른 역할을 합니다. position은 이미지의 위치를 정하고, size는 크기를 조정하며, repeat은 이미지 반복 여부를 결정합니다.

CSS에서 배경 속성을 사용해 배경 이미지를 중앙에 배치하기

배경 이미지를 표시할 영역을 가진 요소에 배경을 지정합니다. 이 예제에서 .hero는 뷰포트 높이만큼의 최소 높이를 가집니다. photo.jpg를 이미지 경로로 바꾸세요.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .hero {
      min-height: 100vh;
      background-image: url("photo.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  </style>
</head>
<body>
  <main class="hero"></main>
</body>
</html>

background-position: center는 .hero 안에서 이미지를 가로와 세로 방향 모두 중앙에 배치합니다. 두 단어로 된 값 center center도 같은 의미입니다. background-size: cover는 컨테이너 전체를 덮을 때까지 이미지를 확대하거나 축소하므로, 이미지와 컨테이너의 비율이 다르면 한쪽 축에서 이미지가 잘릴 수 있습니다. 이미지 전체를 표시해야 한다면 background-size: contain을 사용하세요. 이 경우 컨테이너에 빈 공간이 남을 수 있습니다. 이미지의 원래 크기를 유지하려면 background-size를 생략합니다.

background-repeat: no-repeat은 타일 반복을 막습니다. 이미지 크기를 조정하거나 중앙에 배치하는 기능은 없습니다. 기본 반복 동작에서는 이미지가 컨테이너보다 작을 때 여러 타일이 생길 수 있으므로, 반복을 원하지 않는다면 no-repeat을 사용하세요. background-attachment는 배경이 페이지와 함께 스크롤되는지, 뷰포트에 고정되는지를 제어합니다. 이 속성은 선택 사항이며 이미지 중앙 배치와는 관계가 없습니다. 이 선언들은 background 단축 속성으로 작성할 수도 있지만, 개별 속성을 사용하면 각 설정을 더 쉽게 조정할 수 있습니다.

이 예제를 실행하면 같은 선언을 스타일시트에 복사할 수 있는 CSS 텍스트 형식으로 출력합니다:

const declarations = {
  backgroundImage: 'url("photo.jpg")',
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center",
  backgroundSize: "cover"
};

for (const [property, value] of Object.entries(declarations)) {
  const cssName = property.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
  console.log(`${cssName}: ${value};`);
}

background-image: url("photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;

뷰포트 전체를 채우는 대안으로 이미지 요소 배치하기

img 요소는 이미지가 콘텐츠이거나 보조 기술로 사용할 수 있어야 할 때 선택할 수 있는 별도의 방법입니다. CSS 배경 이미지와는 다릅니다. 페이지 콘텐츠 뒤에서 뷰포트 전체를 채우게 하려면 요소에 고정 위치 지정과 네 방향의 오프셋을 적용한 다음, 콘텐츠 뒤에 배치합니다. 이 방식으로 요소를 배치하려면 top, right, bottom, left 오프셋에 적용될 position 속성이 필요합니다.

<img class="viewport-image" src="photo.jpg" alt="">
<main class="page-content">
  <h1>Page content</h1>
</main>
<style>
  .viewport-image {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
</style>

여기서 inset: 0은 top, right, bottom, left를 모두 0으로 설정해 위치가 지정된 상자가 뷰포트 전체를 차지하게 합니다. object-fit: cover는 비율을 유지하면서 이미지가 상자를 채우도록 크기를 조정하며, 이미지 일부가 잘릴 수 있습니다. 이미지 전체를 표시하려면 object-fit: contain을 사용하세요. 이 경우 빈 공간이 남을 수 있습니다. 빈 alt는 이미지가 장식용일 때만 적절합니다. 이미지가 정보를 전달한다면 의미 있는 대체 텍스트를 제공하세요. 실제 페이지에서는 이미지 위에 놓인 전경 텍스트를 읽기 쉽게 유지해야 합니다. 장식용 배경만 필요한 경우에는 첫 번째 방법이 더 간단하며 문서에 이미지 요소를 추가하지 않습니다.