html - 响应式背景

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;
}