Css 如何使背景图像大小响应桌面和移动设备？

我希望在我的主页上有一个桌面上全宽的背景图像，但随着屏幕尺寸的缩小，图像右侧的部分应该越来越少地消失（但始终显示图像左侧的边缘和对象）

我的CSS代码如下所示

.sm-img-bg-fullscr {
  background-position: 0% 0px;
  background-size:auto;

  width: 100%;
  display: block;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  background-repeat: no-repeat;
}

调用该类的html如下所示：

<div class="sm-img-bg-fullscr parallax-section" style="background-image: url(assets/system/backgroundimage.jpg)" data-stellar-background-ratio="0.5">

我尝试过调整背景大小变量和背景位置变量，但没有成功。使用的图像是1920 x 1080

我想知道当屏幕宽度足够大时，CSS参数的什么组合将允许显示完整的图像，并且随着屏幕尺寸的缩小，它将越来越多的图像右侧移除，使图像的左侧可见。

您尝试过这个吗

background-position: center;

---

为什么不使用媒体查询来调整特定屏幕大小上的图像背景

我们所做的就是调整

背景位置

正文{
边距：0；填充：0}
*{
框大小：边框框}
.形象{
宽度：100vw；
高度：100vw；
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/9/94/Cirrus_clouds_mar08.jpg");
背景重复：无重复；
背景位置：中心；
背景尺寸：封面
}
@仅介质屏幕和（最小宽度：1px）和（最大宽度：700px）{
.形象{
背景位置：左中；
}
}

---

在CSS中尝试此功能

{background-size: auto;}  

---

或者使用

max width:？？.px

尝试内联样式，我已经尝试过了-它似乎没有任何效果不同于使用背景位置：50%0%，我也尝试过。不过，谢谢！我发现使用width:100%会阻止图像对齐到左中心，即使添加了大小条件代码。当我去掉这个并使用height=100%时，它看起来像是在左中心对齐——但我想知道为什么这是为了将来的参考——你有什么想法吗？