Css 在手机上查看或视口大小减小时，如何防止背景图像被切断？

在移动设备上查看时，我的背景图像会发生以下情况。如何在不更改图像的情况下调整或裁剪图像，使其覆盖整个页面

---

这是您要使用的CSS：

.background-element {
   background-image: url("http://wherever.com/your-img.jpg");
   background-size: cover;
   background-position: center; /* or 50% 50% */
   background-repeat: no-repeat;
 }

背景尺寸：封面将展开图像以填充其容器，背景位置：居中将居中

当然，这将要求以图像为背景的元素为视口宽度和高度的100%

.background-element {
   background-image: url("http://wherever.com/your-img.jpg");
   background-size: cover;
   background-position: center; /* or 50% 50% */
   background-repeat: no-repeat;

   position: fixed;
   z-index: -1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }

或

取决于您的元素是
主体
元素的子元素还是
主体
元素本身。
您可以使用bootstrap框架进行同样的操作。
要链接引导工作，请使用以下代码


您必须实现
背景尺寸：封面
用于桌面，以及使用媒体查询的手机和平板电脑的优化背景图像。（创建单个图像-一个用于桌面，一个用于移动设备，一个用于平板电脑）

不幸的是，
background size:cover
在手机和iOS设备上容易损坏和消失

对于防弹设计，您的代码将如下所示（调整自定义高度等）：

可能是错误的，但您的意思是
背景尺寸：封面
（如果您使用的是
背景图像
背景图像：url（../img/brain.jpeg）；
.background-element {
   background-image: url("http://wherever.com/your-img.jpg");
   background-size: cover;
   background-position: center; /* or 50% 50% */
   background-repeat: no-repeat;

   width: 100%;
   height: 100%;
   /* or height: 100vh; */
 }

section {
    background-image: url(section-bg-mobile.jpg);
    background-position: center center;    
    height: 500px;
}
@media (min-width:768px) {
    section {
        background-image: url(section-bg.jpg);
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        min-height: 725px;
    }
}