首页自适应背景图，不用 js 实现高度为浏览器可见高度？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 4150 days ago, the information mentioned may be changed or developed.

载入的首页大图正好height是浏览器的高，看了下代码感觉不是js算出来的，用css怎么实现？
例子： https://bitcoinfoundation.org/

首页

载入

浏览器

14 replies • 2014-12-17 18:23:11 +08:00

wolfan

Dec 16, 2014 via Android

min-height:100%
么？

ihuguowei

Dec 16, 2014

background-size:cover

JoyNeop

Dec 16, 2014

http://snook.ca/archives/html_and_css/vm-vh-units

lemonda

Dec 16, 2014

.home .site-header .bg-image {
background-image: url("../img/bitcoin-bg-1.jpg");
background-position: center center;
background-size: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}

txlty

Dec 16, 2014

测试的姿势不对。
把JS禁用，再看，效果没了。

pandada8

Dec 16, 2014 via Android

height:100vh

linking

Dec 16, 2014

@txlty you're right

lvwzhen

Dec 16, 2014

100vh 才是对的

Slienc7

Dec 16, 2014

body {
margin:0;
padding:0;
background: #000 url('imgs.jpg') center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}

ooh

Dec 17, 2014

body {
background: url(../img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Grenadn

Dec 17, 2014 via Android

需要把html元素和body元素设为height:100%，然后给body加上background，把它的background-size设为cover，over

kmvan

Dec 17, 2014

这网站。。。居然是“沉浸式”顶栏。。。

fyh1807008

Dec 17, 2014

正解 @JoyNeop
vh赞