Per impostazione predefinita, questo è il modo in cui il componente gestisce l’adattamento di una singola immagine di sfondo a diversi dispositivi. L’immagine di sfondo è impostata utilizzando background-size: cover in CSS (maggiori informazioni qui: background-size - CSS | MDN).
Quindi, per impostazione predefinita, l’immagine di sfondo utilizzata verrà ridimensionata per coprire sempre l’intero sfondo del contenitore.
Si potrebbe apportare un miglioramento aggiungendo un’immagine mobile alternativa a questo componente, ma anche in quel caso è probabile che i singoli siti debbano aggiungere del CSS a determinate larghezze dello schermo se hanno requisiti specifici per le immagini di sfondo (non aiuterebbe in questo caso, poiché questo problema si verifica a larghezze maggiori rispetto a quelle mobili). Nel caso di Wyze, hanno installato una versione personalizzata del componente per supportare le loro esigenze specifiche.
Per i dettagli sulla modifica del CSS, qualcosa di simile potrebbe migliorare il comportamento dell’immagine di sfondo nel tuo caso.
.search-banner .custom-search-banner-wrap {
background-size: contain;
}
Potrebbe anche essere necessario impostare comportamenti diversi a larghezze diverse, ad esempio:
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // se lo schermo è largo meno di 1000px
background: none; // nasconde lo sfondo
}
}
Se sei nuovo a questo, abbiamo una guida che potrebbe aiutarti: Making custom CSS changes on your site