响应背景

Question

我正在尝试制作粒子JS负责的背景图像。因此我使用了这段代码：

#particles-js {
margin: 0;
padding: 0;
width:100% ;
height: 100%;
background-image: image-url("rub.jpg");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

但是当我调整浏览器大小时，我得到了这个结果：

在我看来，身高太小了。我使用了图像background-size: cover，因为它是建议使背景图像响应但不适合的。

我的问题是，它是否取决于图像的原始大小或我做错了什么？如果有任何具体方法使背景真正响应？换句话说，使图像背景适合不同移动设备的屏幕的最大高度和宽度？

Answer 1

看看这是否有帮助：http://codepen.io/panchroma/pen/ggMYBQ

关键细节是将背景图像应用于覆盖屏幕整个高度的元素，例如html

CSS

html{ 
  background:url(https://images.unsplash.com/photo-1440804518589-c0bbe09a8103) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}