只适合一个全屏的背景图像

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>

​

演示小提琴：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>

​

小提琴演示：https://jsfiddle.net/nikhilvkd/3uLrqfz8/

Answer 2

它具有CSS样式：

position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;

对于带有“蜘蛛”标识的画布，LOL (使用检查元素)

Answer 3

我使用jQuery来确保容器始终是视图端口的高度。这也有很好的翻译反应；

    vpw = $(window).width();
    vph = $(window).height();
    $(".your-container").css({"height": vph + "px"});

我在这里使用的一个站点的示例：http://startnetwork.org/

提示：

将其添加到窗口大小调整功能中，以处理设备上的用户切换方向。iPad

$(document).ready(function(){
  function resize () {
        vpw = $(window).width();
        vph = $(window).height();
        $(".your-container").css({"height": vph + "px"});
  }

  resize();
});