CSS의 중앙 배경 이미지

Subodh Poudel 2023년2월20일
  1. 배경 속성을 사용하여 CSS의 배경 이미지 중앙에 배치
  2. width, height, lefttop 속성을 사용하여 CSS의 배경 이미지 중앙에 배치
CSS의 중앙 배경 이미지

이 튜토리얼은 CSS에서 배경 이미지를 중앙에 배치하는 몇 가지 방법을 보여줍니다.

배경 속성을 사용하여 CSS의 배경 이미지 중앙에 배치

다양한 배경 속성을 사용하여 CSS의 배경 이미지를 중앙에 배치할 수 있습니다.

background-image, background-repeat, background-attachment, background-position, background-size와 같은 속성을 사용하여 배경 이미지를 중앙에 배치합니다. background 속기 속성을 사용하여 이러한 다양한 속성을 정의할 수도 있습니다.

background-image 속성은 url() 함수를 사용하여 이미지를 설정합니다. background-repeat 속성을 사용하여 이미지의 반복 동작을 정의합니다.

background-attachment 속성은 배경의 고정 또는 스크롤 동작을 정의합니다. background-position 속성을 사용하여 배경의 시작 위치를 설정할 수 있습니다.

마지막으로 background-size 속성을 사용하여 이미지의 크기를 설정할 수 있습니다.

예를 들어 CSS에서 html 태그를 선택하고 스타일을 적용합니다.

먼저 background-image 속성을 사용하여 배경 이미지를 설정합니다. 다음으로 background-repeat 속성을 no-repeat로 설정합니다.

그런 다음 background-attachment 속성에 대한 fixed 옵션을 작성합니다. 그런 다음 background-position 속성을 center center 옵션에 적용하고 background-size 속성을 cover에 적용합니다.

다음 예에서 no-repeat 옵션은 이미지가 반복되는 것을 방지합니다. 배경 이미지 크기가 작으면 이미지가 행과 열로 복제됩니다.

background-attachment 속성에 fixed 옵션을 사용했기 때문에 페이지를 스크롤할 때 배경 이미지가 고정된 상태로 유지됩니다. background-position 속성의 center center 옵션은 이미지를 수평 및 수직 중앙에 배치합니다.

마지막으로 cover 옵션은 전체 html 컨테이너를 덮도록 이미지 크기를 조정합니다. 따라서 CSS의 다양한 배경 속성을 사용하여 배경 이미지를 중앙에 배치할 수 있습니다.

예제 코드:

html{
    background-image: url("/img/DelftStack/logo.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

width, height, lefttop 속성을 사용하여 CSS의 배경 이미지 중앙에 배치

이 방법에서는 width, height, lefttop과 같은 속성을 사용하여 CSS에서 배경 이미지를 중앙에 배치하는 또 다른 방법을 논의합니다. 이미지가 body 태그의 전체 높이와 너비를 차지하도록 높이와 너비를 100%로 설정할 수 있습니다.

body 요소는 img 요소의 부모입니다. topleft 속성을 사용하여 배경 이미지와 이미지의 상단 및 왼쪽 요소까지의 거리를 설정할 수 있습니다.

이 두 속성은 요소의 position 속성이 설정된 경우에만 작동합니다.

예를 들어 img 태그를 선택하고 widthheight 속성을 100%로 설정합니다. 다음으로 position 속성을 fixed로 설정합니다. 그런 다음 leftright 속성을 0으로 설정합니다.

leftright 속성에서 0 값을 사용하여 이웃 요소가 있는 이미지의 상단과 왼쪽 가장자리에 공간을 남기지 않았습니다. 결과적으로 이미지는 브라우저의 뷰포트에 맞습니다.

이런 식으로 이러한 다양한 속성을 사용하여 CSS에서 배경 이미지를 중앙에 배치할 수 있습니다.

예제 코드:

img {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}
<div>
    <img src="/img/DelftStack/logo.png">
</div>
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

관련 문장 - CSS Background

관련 문장 - CSS Image