html - 仅适合一个全屏的背景图片

Question

任何人都知道这个页面是如何做到的。寻找相同的想法。

http://whois.domaintools.com/

如果您注意到沙漠的图片将始终覆盖我的整个浏览器屏幕。但是，这不像常规的全屏背景，因为当我向下滚动背景图像时就结束了。

有没有人对他们如何实现这一目标有任何想法？谢谢:))

Answer 1

这是基本的例子。

纯 CSS

*,html{
  padding:0;
  margin:0;
}
html,body{
  height: 100%;
}
.banner {
  background: url('http://whois.domaintools.com/images/backgrounds/dark-desert-hills.jpg') no-repeat top center scroll;
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

<div class="banner"></div>

演示 fiddle :https://jsfiddle.net/nikhilvkd/3uLrqfz8/1/

Jquery

$(window).on("resize", function() {
  //banner height
  $('.banner').height($(window).height());
}).resize();

*,html{
  padding:0;
  margin:0;
}
.banner {
  background: url('http://whois.domaintools.com/images/backgrounds/dark-desert-hills.jpg') no-repeat top center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner"></div>

fiddle 演示:https://jsfiddle.net/nikhilvkd/3uLrqfz8/