可以滚动的完整背景图像（最初已修复）答案

【问题标题】：Full background image that can scroll (initially fixed)可以滚动的完整背景图像（最初已修复）
【发布时间】：2015-06-13 13:01:00
【问题描述】：

我正在尝试创建一个我自己的网站，其中我有一个背景图片，当它最初加载时会覆盖整个页面。我也希望它具有响应性，这样我就可以看到整个背景图像，而不管屏幕大小。

这里有一个问题，当我滚动页面时，我希望下一个 div 或元素在下面准备好（滚动时）。我能想到的最好的参考是fiftythree.com。

【问题讨论】：

你尝试过什么吗？如果是，请发布一些代码:)

标签： html css web responsive-design responsive-interaction

【解决方案1】：

您在 503.com 上看到的只是一个 div，它具有视口高度的大小并设置了背景图像。

要使图像根据屏幕尺寸缩放，请将其设置为background-size: cover。

.hero {
    background-color: salmon;
    /* background-image: url(...); */
    background-position: center;
    background-size: cover;
    color: #fff;
    height: 100vh;
    overflow: hidden;
}

.hero__title {
    margin-top: calc(50vh - 2em);
    text-align: center;
}

.wrapper {
    padding: 1em;
}

<link href="https://necolas.github.io/normalize.css/3.0.2/normalize.css" rel="stylesheet"/>
<div class="hero">
    <h1 class="hero__title">Look at this</h1>
</div>

<div class="wrapper">
    <h2>Hello earthling</h2>
</div>

【讨论】：

【解决方案2】：

前段时间我也有同样的问题，我确实通过使用本教程解决了这个问题： http://responsivedesign.is/resources/javascript-jquery/back-stretch

Backstretch 是一个 jQuery 插件，可让您向任何页面添加动态调整大小的背景图像。图像将拉伸以适应页面，并随着窗口大小的变化自动调整大小。

它非常易于使用，并且可以完成工作:)

CSS

#header{ 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Javascript

<script type="text/javascript">
  $.backstretch("/path/to/image.jpg", {speed: 150});

  // Perhaps you'd like to change the image on a button click
  $(".button").click(function() {
      $.backstretch("/path/to/next_image.jpg");
  });
</script>

别忘了把它复制到 html 中：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script type="text/javascript" src="/jquery.backstretch.min.js"></script>;

无论如何，请检查链接:)

编辑：http://srobbin.com/jquery-plugins/backstretch/ 更简单

【讨论】：