Swiper - OpenCart - image de fond pleine taille ne fonctionne pas

Question

J'essaie de faire l'image de fond en pleine taille pour chaque diapositive dans le diaporama OpenCart. Comme je le vois, OpenCart utilise Swiper pour créer ce curseur. Voici comment mon html ressemble:

{% for banner in banners %} 
    <div class="swiper-slide text-center" style="background: url({{ banner.image }}); background-repeat: no-repeat; background-position: center center; background-size: cover;"> 
     ... 
    </div> 
{% endfor %} 

Comme je suppose, background-size: cover devrait couvrir l'ensemble fond. Mais malgré cela, le résultat est le suivant:

On dirait l'image d'arrière-plan tente de s'adapter dans le bloc que par les coins supérieurs et inférieurs. Est-ce qu'il y a quelque chose qui me manque?

Answer 1

Vous étiez très proche, mais la propriété CSS est en fait "background-attachment: cover;" plutôt que "background-size: cover;".
Cela devrait résoudre le problème que vous appelez.

Une autre chose qui pourrait aider est d'utiliser la méthode abrégée de fond, par exemple, au lieu d'utiliser background: url({{ banner.image }}); background-repeat: no-repeat; background-position: center center; background-size: cover;

Vous pouvez utiliser background: #000000 url({{banner.image}}) no-repeat cover center;