Html Twitter引导响应背景图像

我正在尝试创建一个类似的网站：

在任何设备上，一个带有响应图像的单页站点占据了整个屏幕。这是我的问题，我想不出一种方法，让背景图像在任何设备上全屏显示

<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">

---

我遇到了这个问题，但运气不好，如果有人能为我指出正确的方向，我会非常确定。

这里的关键部分是将内容的高度设置为相对于视口的100%（

html

元素）。通过将背景图像应用于

div

，而不仅仅是使用

img

，您还可以更灵活地显示其显示方式，

背景位置

使其始终居中，

背景大小：封面

使其保持缩放

HTML

---

谢谢，这很有帮助！

<div></div>
<div>More Content</div>

html, body {
    height:100%;
    width:100%;
    position:relative;
    margin:0;
    padding:0;
}
div:first-of-type {
    height:100%;
    width:100%;
    background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
    background-size:cover;
    background-position:center center;
}
div:last-of-type {
    background:green;
    position:relative;
    color:white;
    height:100%;
}