屏幕尺寸减小时自动调整图像大小

Question

我使用图像作为我的背景，它完全适合。 当我尝试调整屏幕大小（手机/平板电脑尺寸）时，图像会停留在后面而不会像屏幕一样缩小 - 不会变得敏感。 我想改变这种效果，使其响应，并在尺寸屏幕上变小。

查看附件。

HTML：

<!-- Header -->
<header id="top" class="header">
    <div class="text-vertical-center">
        <h1>Test</h1>
        <h3>The</h3>
        <br>
        <a id="show-panel" href="#" class="btn btn-dark btn-lg">Sign Up</a>
    </div>
</header>

CSS：

/* Header */
.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/coffee.jpg) no-repeat center center scroll;
    color: #ffffff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

Answer 1

尝试切换宽度和高度以使用vw和vh而不是％。另外，不使用scroll作为background-image属性的位置，而是使用fixed。 我在jsfiddle中试了一下。

.header {
  display: table;
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url(http://lorempixel.com/1920/1080/food) no-repeat center center fixed;
  color: #ffffff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

Answer 2

您还可以尝试在标题div上使用position absolute，并将边距设置为始终覆盖整个区域。我根据你的代码做了一个例子。 https://codepen.io/morganfens/pen/NjJBJB

.header {
background: url(../img/coffee.jpg);
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
background-repeat:no repeat;
background-size:cover;
color: #ffffff;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

Answer 3

您可以使用此CSS代码：

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

从这里开始：https://css-tricks.com/perfect-full-page-background-image/

在提出问题之前，请记得做一些研究！快速搜索＆＃34; css完整背景图像＆＃34;谷歌上给你很多答案。