Html 响应背景

我正在尝试制作粒子的背景图像。因此，我使用了以下代码：

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

但当我调整浏览器大小时，我会得到以下结果：

在我看来，它的高度太小了。我使用了image

background size:cover

，因为这是建议使背景图像具有响应性的方法，但它并不适合

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

看看这是否有帮助：

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

CSS

---

请包括一个工作提琴。尝试添加

html，body{height:100%；}

I thied with body:100%，但同样的情况我正在使用ruby on rails框架和JqueryWe，我们需要查看html的其余部分。你使用的

背景大小：cover

是正确的，这让我相信包含你的

粒子js

的容器是错误的。嗨，问题是背景不是主体的一部分，或者html元素是粒子js div的一部分。这是我完整的问题和代码。很抱歉没有完全发布。

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