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

小提琴：https://jsfiddle.net/L93hk3fp/

Answer 2

你可以试试这个

#test{
      background:url('http://placehold.it/350x150') no-repeat center center; //Display image full screen
      min-height:100%;  //ensure that it always take full screen to browser window
      background-size:cover;
     }

如何使背景适合屏幕bootstrap3

2 个答案:

你可以试试这个