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

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/

Answer 2

它具有 CSS 样式：

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

对于 ID 为 "spiders" 的 canvas LOL （使用检查元素）

Answer 3

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

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

我在此处使用的网站示例：http://startnetwork.org/

提示：

将其添加到 window 调整大小功能以处理用户在设备上切换方向，例如。 iPad

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

  resize();
});

Answer 4

背景代码来自GreenSock

实际执行任务的代码已提取到他们自己的自定义 Javascript 文件.

Here is the JSFiddle demo

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

Background image that only fits one full screen

html

css

background

background-image