부트스트랩에서 배경 이미지를 설정하는 방법

부트스트랩에서 배경 이미지가 자동으로 적용되도록 설정하는 방법

브라우저: chrome

CSS 사용: bootstrap (이것은 CSS 설정에 영향을 미칠 수 있으므로 계속 언급합니다.)

배경을 설정할 때 이미지 그 과정에서 배경 이미지가 원하는 대로 화면에 자동으로 적용되지 않는 경우가 종종 있었습니다. 저도 여러 가지 방법을 시도해 보고 제 상황에 맞는 설정 방법을 찾았습니다.

코드는 다음과 같습니다.

body {
  background-image: url("../images/backgroundImg2.jpg");
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
}

이렇게 하면 신체의 배경 이미지가 화면에 자동으로 적응되도록 성공적으로 설정할 수 있습니다.

단, 다른 브라우저가 호환되는지는 확인하지 못했습니다. 현재 Chrome에서 사용 가능합니다.

관련 속성:

Background-image 속성은 요소의 배경 이미지를 설정합니다.

요소의 배경은 여백과 테두리를 포함하여 요소의 전체 크기를 차지하지만 여백은 차지하지 않습니다.

기본적으로 배경 이미지는 요소의 왼쪽 상단에 배치되며 가로 및 세로로 반복됩니다.

팁: 배경 이미지를 사용할 수 없는 경우에도 페이지에서 좋은 시각적 효과를 얻을 수 있도록 사용 가능한 배경색을 설정하세요.

관련 추천: "부트스트랩 튜토리얼"

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