Html CSS背景图像在移动浏览器上被扭曲和放大

我的网站上有两个背景图片，都是CSS。最初的登录页图像在桌面和移动设备上都能完美工作，但是第二个在Safari中被扭曲了。我已经尝试了我在网上找到的每一个解决方案，但没有任何效果

着陆图像最初是扭曲的，但我在网上找到了一个解决方案，它工作得非常完美，如下所示（以防万一）：

“”
'''
'''
.家庭包装{
位置：固定；
前-50%；
左-50%；
宽度：200%；
身高：200%；
}
.home inner{
背景：线性渐变（rgba（0,0,0,0.45），rgba（0,0,0,0.45）），url（'../images/bg.jpg'）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
最小宽度：50%；
最小高度：50%；
z指数：-100；
最大宽度：100%；
溢出x：隐藏；
}
@仅介质屏幕和（最大宽度：767px）{
.home inner{
背景：线性渐变（rgba（0,0,0,0.45），rgba（0,0,0,0.45）），url（'../images/bgmob.jpg'）；
背景尺寸：封面；
背景附件：滚动条；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
身高：100%；
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景色：黑色；
溢出x：隐藏；
}
}
'''

以下是失真的第二幅背景图像：

'''
    <div class="bg-wrap">
        <div class="fixed-background">
        </div>
    </div>
'''

'''
.bg-wrap{
    position: relative; 
    height: 100%;
    width: 100%;
}
.fixed-background {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/bg2.jpg);
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1; 
    position: relative; 
    margin-bottom: 0; 
}
@media only screen and (max-width: 767px) {
    .fixed-background {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/bg2mob.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: scroll;
        position: fixed; 
        height: 100vh;
        overflow-x: hidden;
    }
 }
'''

“”
'''
'''
.bg包裹{
位置：相对位置；
身高：100%；
宽度：100%；
}
.固定背景{
背景：线性梯度（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（../images/bg2.jpg）；
身高：100%；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
z指数：1；
位置：相对位置；
页边距底部：0；
}
@仅介质屏幕和（最大宽度：767px）{
.固定背景{
背景：线性渐变（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（'../images/bg2mob.jpg'）；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
背景附件：滚动条；
位置：固定；
高度：100vh；
溢出x：隐藏；
}
}
'''

---

我知道Safari手机浏览器对背景图片的响应不好，但我想如果我让第一个浏览器工作，第二个也应该工作。我觉得这可能与位置有关。我还有更小、更适合移动浏览器的图像，这些图像可以在上面的媒体查询中看到。我已经尝试了无数的解决方案，所以这是我最后一次绝望的尝试

您是否尝试删除

背景尺寸：封面？因为这将拉伸图像以填充整个分区。
不是说定位不是问题（查找相对和绝对定位），而是由于您同时设置了高度和宽度而导致的失真。如果您设置了一个或另一个（在大多数情况下，高度在桌面上的移动宽度上效果最好），则封面应允许其大小正确。还可以尝试使用vh（视口高度）和vw（视口宽度），而不是高度或宽度的%。谢谢，我将其更改为仅高度：100vh；然而，图像仍然是一样的。
'''
    <div class="bg-wrap">
        <div class="fixed-background">
        </div>
    </div>
'''

'''
.bg-wrap{
    position: relative; 
    height: 100%;
    width: 100%;
}
.fixed-background {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/bg2.jpg);
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1; 
    position: relative; 
    margin-bottom: 0; 
}
@media only screen and (max-width: 767px) {
    .fixed-background {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/bg2mob.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: scroll;
        position: fixed; 
        height: 100vh;
        overflow-x: hidden;
    }
 }
'''