爲什麼背景圖片不響應瀏覽器的調整？

我的背景圖像和它的文本是響應寬，只要在瀏覽器高度尺寸最大調整。但是，當減少瀏覽器（如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

爲什麼背景圖片不響應瀏覽器的調整？

回答

相關問題