☰

부트스트랩 4: CSS 없이 배경 이미지를 포함하는 방법

tag-icon • tag-icon css
부트스트랩 4: CSS 없이 배경 이미지를 포함하는 방법

Bootstrap은 가장 일반적인 웹 사이트 디자인 요소를 다루기 위해 CSS 클래스를 정의하지만 투박한 사용자 정의 CSS를 추가하지 않고 Bootstrap 클래스를 사용하여 배경 이미지 파일을 지정하는 방법을 알 수 없습니다.

답변1

background-image:url(''); 을 주어야 합니다. 스타일을 사용하여 속성을 사용하여 이미지 경로를 제공하고 .bg-image 클래스를 사용하여 이미지를 반응형으로 만들 수 있습니다.
이를 수행하는 방법은 다음과 같습니다.
인라인 CSS를 통해 배경 이미지를 추가합니다.
이미지 크기를 적절하게 조정하고 응답성을 활성화하려면 .bg-image 클래스를 추가하세요.
예:

<div class="bg-image" 
     style="background-image: url('https://i.postimg.cc/ZnHTP71s/aircraft-airplane-boat-1575833.jpg');
            height: 100vh">
</div>

vh는 뷰포트 높이를 나타냅니다.
여기서 height:100vh는 사용 가능한 높이의 100%를 의미합니다.

관련 정보