带有 CSS 的响应式整页背景图像答案

【问题标题】：Responsive full page background image with CSS带有 CSS 的响应式整页背景图像
【发布时间】：2015-05-15 07:29:34
【问题描述】：

我正在尝试实现本网站http://www.dubsmash.com/ 中所做的全长响应式背景图像我尝试将background-size: cover; background:url('image') no-repeat center center; overflow:hidden; min-height:100% 应用于html 但结果不一样。

在 dubsmash 网站中查看图像始终居中的方式。他们使用 jquery 来动态计算 window.resize 上包装 div 内图像的高度、宽度和左侧、顶部属性。

我的问题是有人可以帮助我理解他们如何计算宽度，顶部和左侧到img

更新：

到目前为止我的代码： HTML：

<div class="bgHome" style="position:fixed;z-index:-1;top:0;left:0;overflow:hidden">
        <img src="http://www.dubsmash.com/wp-content/themes/dubsmash2.0/pics/woman.jpg" style="position:absolute;top:0"/>
    </div>

jQuery:

$(document).ready (function(){
    checkDims();
});

$(window).resize(checkDims);

function checkDims(){
    a = $(window).height();
    b = $(window).width();  
    $('.bgHome').css({"height":a,"width":b});
    $('.bgHome img').css({"height":a,"width":b});

}

更新-2：

<html></html>

CSS：

html{
     background-size:100%;top:0; left:0;
     background:url('http://www.dubsmash.com/wp-content/themes/dubsmash2.0/pics/woman.jpg') no-repeat center center;
     overflow:hidden;width:100%;height:100%
}

【问题讨论】：

你需要视差效果吗？您是否还希望您的背景图像在滚动时移动？
我不是在寻找视差效果和没有滚动。我只是想知道我是否可以在设置背景图像时使用类似的概念
是的，您可以，例如，您要拍摄第一张图片吗？
他们也在改变背景位置
@Scott，我没有看到 div 或 img 标签的背景位置属性

标签： css background

【解决方案1】：

他们的 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>

他们的 CSS（或其中一些）：

padding: 240px 0;
background-repeat: no-repeat;
/* background-attachment: fixed; */
background-position: center;
background-size: cover;

然后有一堆 javascript 来处理视差

我建议将 bgHome 的背景图像设置为没有 <img> 的孩子，然后在 css 中设置：

.bgHome{
    backgound-image: url('put-url-here');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

【讨论】：

我看到了不同的 html 元素。 body 标签内有 4 个 div 标签。第一个图像 html 在第 4 个 div 标签中。
不，如果你仔细看，图像是在一个部分标签中，我一开始也是这么想的。无论如何 - 我很确定只需设置 background-position: center 就会得到你想要的效果
所以 Scott，对于我上面的代码，你建议在哪里添加背景属性。谢谢

【解决方案2】：

试用此解决方案并进行调整。出于某种原因，我无法粘贴链接，所以你会得到这个丑陋的：D

    Get it below

Codepen sample

【讨论】：

在这里粘贴你的代码，你也可以使用链接来演示，但不要只是发布链接
也无法粘贴代码 :( 格式错误，但我找不到错误。
哦，是的，它可以调整大小，所以一定要拖动它开始使用
试试@Zlatko。但是同样的效果可以通过对html使用background-size:cover而不是通过jquery来实现。
区别在于 css Cover 属性。尝试 100% 的 bg-size，并解释我在这里需要什么，我想它在示例网站上的作用方式是由插件控制的。