CSS: 컨테이너 높이를 배경 이미지 크기에 맞게 자동 조정하는 방법

Div에 배경 이미지를 설정하는 경우 Div 컨테이너의 높이를 배경 이미지 크기에 맞게 자동으로 조정되도록 설정하고 싶은 경우가 있습니다. 그런 경우 CSS를 사용하여 컨테이너 높이를 배경 이미지 크기에 따라 자동으로 변경되도록 할 수 있습니다.

CSS를 사용하여 컨테이너 높이를 배경 이미지 크기에 맞게 자동 조정하는 방법

Div에 배경 이미지를 설정할 경우 배경 이미지가 Div 크기에 따라 잘리거나 배경 이미지가 가로 또는 세로가 확장되어 보기가 싫은 경우가 있습니다.

배경 이미지 크기를 설정하는 CSS 속성은 background-size입니다. background-size 속성에 대한 자세한 정보는 W3Schools 문서를 참고할 수 있습니다.

컨테이너 높이를 배경 이미지 크기에 맞게 자동으로 조정하고 싶은 경우 다음 Stackoverflow에서 제시하는 코드들을 테스트해볼 수 있습니다.

위의 Stackoverflow 문서에 여러 가지 코드가 제시되어 있는데요. 워드프레스 Elementor 페이지 빌더에는 다음 코드가 잘 작동하는 것을 확인했습니다.

div {
background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%;
}

와이드 화면과 모바일 기기 화면을 고려하여 다음과 같이 큰 화면에서는 background-size의 속성을 cover로, 모바일 기기에서는 contain을 적용하면 보다 효과적이다는 답변도 있네요.

/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) { 
    div {
        background-image: url('이미지 URL');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    div {
        background-image: url('이미지 URL');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

응용하기

워드프레스 Elementor 페이지 빌더

워드프레스에서 무료로 이용할 수 있는 인기 페이지 빌더인 Elementor Page Builder 플러그인에서는 이미지를 추가하면 다음 동영상과 같이 기본적으로 전체 백그라운드 이미지가 표시되지 않고 잘려서 표시됩니다.

스타일 탭에서 배경의 크기(Size) 설정을 기본, 자동, Cover, Contain, 사용자 정의로 선택하여 이미지가 원하는 대로 표시되는지 확인해볼 수 있습니다.

엘리멘터 페이지 빌더 CSS

CSS의 object-fit 속성에 대한 자세한 정보는 W3Schools 문서를 참고해보시기 바랍니다.

원하는 대로 표시되지 않을 경우: 섹션 컨테이너 높이를 배경 이미지 크기에 맞게 조정하려면 Elementor 페이지 빌더의 섹션 설정 > Advanced 탭에서 CSS 클래스를 지정하고, 다음과 같은 코드를 워드프레스 관리자 페이지 > 외모(테마 디자인) > 사용자 정의하기 > 추가 CSS에 추가하면 됩니다.

/* Fit the container height to the background image size */
/* 컨테이너 높이를 배경 이미지 크기에 맞게 조정하기 */
.full-background-image {
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

CSS 클래스는 원하는 대로 지정하도록 합니다.

워드프레스 페이지 빌더 CSS 클래스 설정 - 컨테이너를 배경 이미지 크기에 맞게 자동 조정

실제 작동 화면을 다음 동영상을 통해 확인할 수 있습니다.

응용하기: 아바다 테마

베스트셀링 워드프레스 테마인 아바다 테마에서도 동일한 방법으로 응용이 가능합니다. 아바다 테마에서 컨테이너(Container)에 배경 이미지를 삽입하고 기본 설정에서 페이지를 로드해보면 배경 이미지가 컨테이너 크기에 맞게 조정되어 표시됩니다.

Avada 테마에서는 컨테이너의 General 탭에서 CSS 클래스를 지정하고 동일한 코드를 아바다 테마 옵션 내의 사용자 정의 CSS 섹션에 추가하거나 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > 추가 CSS에 추가하면 됩니다.

워드프레스 아바다 테마에 CSS 클래스 설정하기

워드프레스에서 커스텀 CSS 코드는 다양한 방법으로 추가할 수 있습니다. 사용자 정의하기 내의 추가 CSS 섹션에 추가하거나 차일드 테마 내의 스타일시트 파일(style.css)에 추가할 수 있습니다. 또는, 테마에서 사용자 정의 CSS 추가하는 섹션을 제공하기도 합니다.

참고:


댓글 남기기

* 이메일 주소는 공개되지 않습니다.