Por defecto, así es como el componente maneja el ajuste de una sola imagen de fondo para que se adapte a diferentes dispositivos. La imagen de fondo se establece usando background-size: cover en CSS (más información aquí: background-size - CSS | MDN).
Así que, por defecto, la imagen de fondo utilizada se redimensionará para cubrir siempre todo el fondo del contenedor.
Se podría hacer una mejora para añadir una imagen móvil alternativa a este componente, pero incluso con eso, es probable que los sitios individuales tengan que añadir algo de CSS en ciertos anchos de pantalla si tienen requisitos específicos para la imagen de fondo (no ayudaría en este caso, porque este problema está ocurriendo en anchos más grandes que los móviles). En el caso de Wyze, tienen instalada una versión personalizada del componente para soportar sus necesidades específicas.
Para los detalles de cómo hacer los cambios de CSS, algo como esto podría mejorar el comportamiento de la imagen de fondo en tu caso.
.search-banner .custom-search-banner-wrap {
background-size: contain;
}
También podrías necesitar establecer diferentes comportamientos en diferentes anchos, por ejemplo:
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // si la pantalla tiene menos de 1000px de ancho
background: none; // ocultar el fondo
}
}
Si eres nuevo en esto, tenemos una guía que puede ayudarte: Making custom CSS changes on your site