Html 移动视图上放大的视差背景图像

我对媒体查询还是相当陌生，所以我不确定我在这里是否100%正确地使用了它们。但由于某些原因，在我的iPhone上，家庭背景图像和联系人背景图像在移动视图中无法正确显示。我已经搜索了很多解决方案，但仍然没有找到任何有效的。我的网站链接是-任何帮助将不胜感激！此外，当我隐藏iframe贴图时，它仍会在tablet视图中留下一块空白。任何帮助都将不胜感激

#主页{
背景：url（'../images/colored bg.jpg'）50%0重复-y固定；
-webkit背景尺寸：封面；
背景尺寸：封面；
背景位置：中心；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
高度：100vh；
文本对齐：居中；
}
#接触{
背景：url（'../images/contact bg.jpg'）50%0已修复重复；
-webkit背景尺寸：封面；
背景尺寸：封面；
背景位置：中心；
}
/*移动响应剖面样式
/* ========================================== */
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（-webkit最小设备像素比：1）{
h1{
字体大小：53px；
}
#柜台，柜台{
填充顶部：20px；
垫底：20px；
}
#家，
#分隔器，
#接触{
-moz背景尺寸：自动；
-webkit背景大小：自动；
背景附件：滚动条；
背景位置：顶部；
背景尺寸：自动；
}
iframe{
显示：无；
}
}
@介质（最大宽度：650px）{
h1{
字体大小：40px；
}
#家，
#分隔器，
#接触{
-moz背景尺寸：自动；
-webkit背景大小：自动；
背景附件：滚动条；
背景位置：顶部；
背景尺寸：自动；
}
iframe{
显示：无；
}
}
@介质（最大宽度：450像素）{
h1{
字号：28px；
线高：38px；
}
#家h5{
字体大小：11px；
}
#首页{
显示：内联块；
填充：14px 32px；
}
#家，
#分隔器，
#接触{
-moz背景尺寸：自动；
-webkit背景大小：自动；
背景附件：滚动条；
背景位置：顶部；
背景尺寸：自动；
}  
iframe{
显示：无；
}
}
@介质（最大宽度：375px）{
h1{
字体大小：24px；
线高：34px；
}
#家h5{
字体大小：9px；
}
#家，
#分隔器，
#接触{
-moz背景尺寸：自动；
-webkit背景大小：自动；
背景附件：滚动条；
背景位置：顶部；
背景尺寸：自动；
}
iframe{
显示：无；
}
}

看起来您的背景图像没有“放大”，但实际上“没有缩小”。背景以实际大小显示在比

1024px

窄的屏幕上

这是由于在

~480

、

~500

、

~525

和

~545

行中使用了相当多的

样式.css

声明，其中一系列媒体查询重复设置

\home

的

背景大小

属性，

#分隔器

和

#联系
元件至
自动

如果希望背景图像尽可能小但仍覆盖元素，则应将这些元素的
background size
属性设置为
cover

另一方面，将
背景大小
设置为
封面
将与您选择的视差方法冲突。每当您在
背景尺寸：封面
元素上通过视差垂直移动
背景位置
时，就会出现您描述的“空白块”。可以使用两种不同的方法解决此问题：

使用负边距+填充，使背景
足够放大
，当元素出现在屏幕上时，“白色块”不会出现
使用不同的视差方法（绝对定位的
标记或可以应用CSS转换的伪元素）
请注意
style.css
目前有大量次优代码。
您的标记也有一些明显的不一致之处，例如，你的一些部分使用了
视差部分
类，而另一些部分使用
视差部分
，在你的
CSS
中找不到该部分的
typeof property=='undefined'
中没有正确显示表达式。我不确定你的意思。你能详细说明一下吗？编程是精确的，而
正确的
是有争议的（我认为正确的，你可能会认为不正确，反之亦然）。因此，在描述技术问题时，应避免使用正确的
、
漂亮的
、
丑陋的
、
奇怪的
，以及其他此类有争议的术语。嗯。。。好啊好吧，我在标题中说明了确切的问题。我的固定背景图像在移动浏览器上显示时会放大。如果我用的词不准确，我道歉，但那是我的问题。这是你能帮忙的吗？谢谢！它是固定的，并显示为我希望它在移动视图。它确实与视差部分的不一致性有关。我将修复这个问题，并从样式表中删除不必要的代码。再次感谢您的时间和回复！不客气。我很高兴我的回答有助于找到你的解决办法。请考虑将其标记为已接受。