Html 图像在移动横幅中重复，我如何阻止它？

我的网站上的主baner图像有问题。使用鼠标右键单击检查元素，然后选中“切换设备工具栏”或使用ctrl+shift+m

正如您将看到的，主图像在移动模式下不断重复：

守则：

html:

但不起作用，图像看起来丑陋而模糊。。。我想要和需要的只是我的图像看起来像第一个图像（拉伸），但不会在背景中重复自己。。。。

如果我删除“背景尺寸：封面”，拉伸的图像会出现在中间（这是我想要的，因为我需要一个白色背景环绕的小图像，有没有可行的方法

编辑：如上所述，我使用了此解决方案：

但我想要和需要的是，图像自出现以来，看起来居中且小 使用背景：封面看起来很难看，我不知道如何使图像正确地显示在手机屏幕上而不显得模糊和难看

---

我如何解决这个问题？谢谢！

问题不在于背景图像重复

发生的事情是，在手机大小的幻灯片开始上方的div中仍然有一个完整大小的图像

请参阅下面的代码，该代码显示了div的位置，该div具有内联样式，使其具有更大的背景图像

<div class="owl-item active" style="width: 330px;">
  <a class="block-slideshow__slide" href="#">

下一行是问题所在。有一个背景图像仍然大于移动幻灯片放映的高度，当您转到移动大小调整时，它仍然存在。

<div class="block-slideshow__slide-image block-slideshow__slide-image--desktop" style="background-image: url('images/slides/slide-1-full.jpg')"></div>
<div class="block-slideshow__slide-image block-slideshow__slide-image--mobile" style="background-image: url('images/slides/slide-1-mobile.jpg');"></div>
<div class="block-slideshow__slide-content">
  <div class="block-slideshow__slide-title">Corporacion Venus C.A</div>
  <div class="block-slideshow__slide-text">Rif J-29419176-2</div>
  <div class="block-slideshow__slide-button"><span class="btn btn-primary btn-lg">Comprar ahora</span></div>
</div>

维纳斯公司
Rif J-29419176-2
康帕拉阿霍拉

我该怎么解决这个问题，霍沃斯？谢谢！

<div class="owl-item active" style="width: 330px;">
  <a class="block-slideshow__slide" href="#">

<div class="block-slideshow__slide-image block-slideshow__slide-image--desktop" style="background-image: url('images/slides/slide-1-full.jpg')"></div>
<div class="block-slideshow__slide-image block-slideshow__slide-image--mobile" style="background-image: url('images/slides/slide-1-mobile.jpg');"></div>
<div class="block-slideshow__slide-content">
  <div class="block-slideshow__slide-title">Corporacion Venus C.A</div>
  <div class="block-slideshow__slide-text">Rif J-29419176-2</div>
  <div class="block-slideshow__slide-button"><span class="btn btn-primary btn-lg">Comprar ahora</span></div>
</div>