html - 如何使背景适合屏幕bootstrap3

Question

我想做一个适合背景的屏幕。里面没有内容。怎么做到的

CSS

#test {
    background: url(http://placehold.it/350x150) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-size: 100% 100%;
}

HTML

<div id="test"></div>
<div id="body">
    <p>lorem ipsum dolor sue lorem ipsum dolor sue </p>
</div>

这是 demo .

Answer 1

您可以将宽度添加到 100% 并将高度添加到 100vh 并为其应用背景。

您的 CSS 应如下所示:

#test{
  width: 100%;
  height: 100vh;
    background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-size: 100% 100%;
}

fiddle :https://jsfiddle.net/L93hk3fp/