기본적으로 이 컴포넌트는 다양한 기기에 맞춰 단일 배경 이미지를 조정하는 방식을 사용합니다. 배경 이미지는 CSS에서 background-size: cover를 사용하여 설정됩니다(자세한 내용은 여기: background-size CSS property - CSS | MDN).
따라서 기본적으로 사용되는 배경 이미지는 컨테이너의 전체 배경을 항상 덮도록 리사이즈됩니다.
이 컴포넌트에 모바일용 대체 이미지를 추가하는 방식으로 기능을 향상시킬 수 있지만, 특정 배경 이미지 요구 사항이 있는 개별 사이트에서는 특정 화면 폭에서 일부 CSS를 추가해야 할 가능성이 여전히 높습니다(이 경우 해당 문제가 모바일보다 넓은 폭에서 발생하므로 도움이 되지 않습니다). Wyze의 경우, 그들의 특정 요구 사항을 지원하기 위해 컴포넌트의 커스터마이즈 버전이 설치되어 있습니다.
CSS 변경 사항의 구체적인 사항에 대해, 다음과 같은 코드가 여러분의 경우 배경 이미지의 동작을 개선하는 데 도움이 될 수 있습니다.
.search-banner .custom-search-banner-wrap {
background-size: contain;
}
또한 다른 폭에서 서로 다른 동작을 설정해야 할 수도 있습니다. 예를 들어:
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // 화면 폭이 1000px 미만인 경우
background: none; // 배경 숨기기
}
}
이 분야에 처음이라면 도움이 될 수 있는 가이드가 있습니다: Making custom CSS changes on your site