其余内容之前的100％宽度和高度图像

Question

我正在努力实现这样一种效果，如f.e.在这里：http://www.createpilates.com/

我要做的是在网站加载时设置“封面”图像，然后如果用户向下滚动，则内容可见。

请注意，无论是否调整窗口大小等，第一张图片始终覆盖100％的加载屏幕。

有人可以帮我吗？谢谢！

Answer 1

确保您的元素设置了完整的高度和宽度，然后使用以下内容：

#element {
    width: 100%;
    height: 100%;
    background: url("yourimage.jpg") no-repeat center center fixed;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="yourimage.jpg", sizingMethod="scale"); 
}