Question

只要浏览器高度调整为最大值，我的背景图像及其文本就会响应宽度调整大小。但是当降低浏览器（例如Chrome）的高度时，背景图像不再适合整个窗口。任何建议都有帮助！

#header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/img/roses.jpg);
    background-size: cover;
    background-position: center center;
    height: 100vh;
}
.name h1 {
    font-family: 'Muli', sans-serif;
    font-size: 500%;
    font-weight: 300;
    text-align: center;
    padding-top: 10%;
}
.name p {
    font-family: 'Play', sans-serif;
    font-size: 150%;
    text-align: center;
    padding-top: 5%;
}
.navigation p {
    display: inline;
}
.navigation {
    text-align: center;
    padding-top: 10%;
}
.contents:hover {
    color: white;
    text-decoration: none;
}
.contents {
    color: whitesmoke;
    text-decoration: none;
}

/* Media Queries */
@media (max-width: 33.9em) {
    .name h1 {
        font-size: 300%;
    }
    .name p {
        font-size: 100%;
    }
}

<section id="header">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 name">
                <h1>Temple Naylor</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 name">
                <p>I create Web-designs with a sense of Feng-Shui in mind; resulting for a intuitive, responsive, harmonious, experience for users across the world. <br>
                  NOW AVAILABLE FOR YOU</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 navigation hidden-md-down">
                <p><a class="contents" href="#">ABOUT</a> / </p>
                <p><a class="contents" href="#">WORK</a> / </p>
                <p><a class="contents" href="#">CONTACT</a> / </p>
                <p><a class="contents" href="#">PHOTOGRAPHY</a></p>
            </div>
        </div>
    </div>
</section>

Answer 1

关闭但稍微关闭。你想要背景大小：封面

body {
  background: url(http://www.hd-wallpapersdownload.com/script/bulk-upload/3d-wallpaper-rose-dowload.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

DEMO

<强>更新我被告知OP希望文本在缩小时保持滚动，所以这是VW中与PX相反的文本版本，因此它也会响应。

带有自适应文字的

DEMO。

Answer 2

您可能想要使用background-size: 100%;

<强>更新

从标题中删除height: 100vh;，这应解决问题见fiddle

如果这适合您，可以添加background-position: fixed，fiddle

看到这个伟大的啧啧https://css-tricks.com/perfect-full-page-background-image/

Answer 3

当您调整窗口大小时，#header超出了浏览器高度的100％，因为内部有.container，因此滚动。

要解决此问题，请添加

#header { overflow: hidden; }
body { margin: 0; }

或从.container

中获取#header

为什么背景图片不响应浏览器调整大小？

3 个答案: