带有CSS的响应性全页背景图像
我试图实现全长响应的背景图像在这个网站上所做的 我试着应用带有CSS的响应性全页背景图像,css,background,Css,Background,我试图实现全长响应的背景图像在这个网站上所做的 我试着应用背景尺寸：封面；背景：url（“图像”）无重复中心；溢出：隐藏；最小高度：100%到html 但结果是不同的 查看Dubsash网站中图像始终居中的方式。他们使用jquery动态计算窗口中包装div内图像的高度、宽度和左上角属性。调整大小 我的问题是，有人能帮助我理解他们是如何计算img的宽度、顶部和左侧的吗 更新： <html></html> 到目前为止，我的代码是： HTML: 更新-2： <html&
背景尺寸：封面；背景：url（“图像”）无重复中心；溢出：隐藏；最小高度：100%窗口中包装div内图像的高度、宽度和左上角属性。调整大小
我的问题是，有人能帮助我理解他们是如何计算img的宽度、顶部和左侧的吗
更新：
<html></html>
到目前为止，我的代码是：
HTML:
更新-2：
<html></html>
他们的HTML看起来像：
<section class="module parallax" data-parallax="scroll" data-image-src="http://www.dubsmash.com/wp-content/themes/dubsmash2.0/pics/man_singing.jpg">
</section>
然后有一堆javascript来处理视差
我建议将bgHome
的背景图像设置为孩子没有
，然后在css中设置：
.bgHome{
backgound-image: url('put-url-here');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
尝试此解决方案并进行调整。由于某些原因，我无法粘贴链接，所以您将得到这个丑陋的链接：D
Get it below
您需要视差效果吗？你也希望你的背景图像在滚动上移动吗？我不是在寻找视差效果和没有滚动。我只是想知道我是否可以在设置背景图像时使用类似的概念是的，你可以，你想要第一张图像吗？他们也在改变背景-position@Scott，我没有看到div或img tag的background position属性，我看到了不同的html元素。body标签中有4个div标签。第一个图像html在第四个div标记中。不，如果你仔细看，图像在一个section标记中，我一开始也这么认为。无论如何，我很确定只要设置背景位置：中心就会得到你想要的效果。所以斯科特，对于我上面的代码，你建议在哪里添加背景属性。感谢在此处粘贴代码，您也可以使用链接进行演示，但不要只发布链接也不能粘贴代码：（格式错误，但我找不到错误。哦，是的，它可以调整大小，所以请确保您拖动它以获得startedTrid@Zlatko。但是使用背景大小也可以达到相同的效果：html的封面而不是通过jquery。不同之处在于css封面属性。请尝试100%调整bg大小，并向我解释您在这里需要什么，t我想，它在示例网站上的行为方式是由插件控制的。
padding: 240px 0;
background-repeat: no-repeat;
/* background-attachment: fixed; */
background-position: center;
background-size: cover;
.bgHome{
backgound-image: url('put-url-here');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Get it below