CSS의 중앙 배경 이미지

1. 배경 속성을 사용하여 CSS의 배경 이미지 중앙에 배치
2. width, height, left 및 top 속성을 사용하여 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, left 및 top 속성을 사용하여 CSS의 배경 이미지 중앙에 배치

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

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

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

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

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

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

예제 코드:

img {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

<div>
    <img src="/img/DelftStack/logo.png">
</div>