html/css에서 배경 이미지를 중앙에 배치하는 방법

HTML/CSS에서는 background-position 속성을 사용하여 배경 이미지가 중앙에 오도록 설정할 수 있습니다. 배경 이미지가 설정된 요소에 "backup-position: center;" 스타일을 추가하기만 하면 됩니다. 배경 이미지를 가로 및 세로 방향으로 설정할 수 있습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML/CSS 배경 이미지를 가운데로 설정하는 단계

프런트 엔드 개발 도구를 열고 새 HTML 코드 페이지를 만듭니다.

배경 색상을 설정하기 위한 div 태그를 만듭니다. html 코드 페이지를 만든 다음 이 태그에 Add class = "bg-img"를 지정

하여 배경 이미지를 설정하세요. 스타일 태그를 생성한 다음 태그의 bg-img 클래스에 대한 배경 이미지, 비반복 이미지, 너비 및 높이 스타일을 설정합니다. 스타일 코드:

.bg-img{
height: 100vh;
width: 100%;
background-image: url(img/car.jpg);
background-repeat: no-repeat;
}

html 코드를 저장하고 브라우저로 열면 왼쪽 상단에 브라우저의 배경 이미지가 표시되는 것을 볼 수 있습니다.

html 코드 페이지로 돌아가서 bg-img 클래스에 background-position: center 스타일을 추가하세요.

html 코드를 저장하고 브라우저를 새로고침하면 브라우저의 배경 이미지가 자동으로 중앙에 맞춰진 것을 확인할 수 있습니다.

추천 튜토리얼: "html 비디오 튜토리얼", "CSS 비디오 튜토리얼"

위 내용은 html/css에서 배경 이미지를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!