Par défaut, c’est ainsi que le composant gère l’ajustement d’une seule image d’arrière-plan pour s’adapter à différents appareils. L’image d’arrière-plan est définie à l’aide de background-size: cover en CSS (plus d’informations ici : background-size - CSS | MDN).
Ainsi, par défaut, l’image d’arrière-plan utilisée sera redimensionnée pour couvrir toujours l’intégralité de l’arrière-plan du conteneur.
Une amélioration pourrait être d’ajouter une image mobile alternative à ce composant, mais même avec cela, il est probable que des sites individuels devront ajouter du CSS à certaines largeurs d’écran s’ils ont des exigences spécifiques en matière d’images d’arrière-plan (cela n’aiderait pas dans ce cas, car ce problème se produit à des largeurs supérieures à celles du mobile). Dans le cas de Wyze, ils ont une version personnalisée du composant installée pour répondre à leurs besoins spécifiques.
Pour les spécificités des modifications CSS, quelque chose comme ceci pourrait améliorer le comportement de l’image d’arrière-plan dans votre cas.
.search-banner .custom-search-banner-wrap {
background-size: contain;
}
Vous pourriez également avoir besoin de définir des comportements différents à différentes largeurs, par exemple :
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // si l'écran est moins large que 1000px
background: none; // masquer l'arrière-plan
}
}
Si vous débutez, nous avons un guide qui pourrait vous aider : Making custom CSS changes on your site