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

我的背景图像和它的文本是响应宽，只要在浏览器高度尺寸最大调整。但是，当减少浏览器（如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>

来源

2016-11-15 YoungCoder

这里是什么样子时，浏览器高度缩短像http://imgur.com/a/2pSYB – YoungCoder

可以使用'背景尺寸100％100％'但在这种情况下，图像将伸展，或你将不得不调整高度按照图像高度宽度以适应在容器中。 –

创建一个真正的图像提琴 –

关闭，但有点过。你想要的背景大小：覆盖

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

UPDATE： 有人告诉我的OP想保持文本的滚动，因为它缩水，所以这里是VW的文字版本反对PX，所以它也变得反应灵敏。

DEMO与响应文本。

来源

2016-11-15 07:25:04

当你再次使窗口最大化时，会产生同样的问题:(http://imgur.com/a/2pSYB – YoungCoder

我每次都得到全屏，这里没有打嗝 –

这是否仅仅是因为我的形象可能？ – YoungCoder

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

更新

移除头height: 100vh;，这应该可以解决这个问题
看到fiddle

你可能要添加background-position: fixed如果这适合你，fiddle

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

来源

2016-11-15 07:02:37 Rahul

不，这没有帮助:( – YoungCoder

@YoungCoder结帐我更新的答案ur bg img不会截断甚至浏览器高度很小 – Rahul

这是伟大的，但是当你最大化浏览器再次背景图像doesn' t填满整个屏幕 – YoungCoder

当你调整窗口的大小，#header是由于该.container内的浏览器高度超过100％，因此滚动。

为了解决这个问题，添加

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

或获取.container了#header

来源

2016-11-15 07:32:56

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

回答

相关问题