CSS背景圖片有問題

Question

我正在嘗試使用照片作為封面。 由於某種原因，我似乎無法使它正常工作。 我的圖像只是拒絕覆蓋頁面。

 #cover { background-image: url("https://i.stack.imgur.com/QE9pP.jpg"); background-size: cover; background-size: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #464646; } .cover-content { color: hsla(182, 100%, 28%, 1); font-family: font-family: 'Gravitas One', cursive; font-size: 400%; text-align: center; } 

 <div id="cover"> <div class="cover-content"> <h1>Snowfall Design Studio</h1> </div> </div> 

Answer 1

您的頁面未涵蓋整個視口。 如果要使圖像覆蓋整個屏幕，請將背景圖像放在html或body元素上

 html { height: 100%; } body { min-height: 100%; background-image: url("https://i.stack.imgur.com/QE9pP.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-color: #464646; } .cover-content { color: hsla(182, 100%, 28%, 1); font-family: font-family: 'Gravitas One', cursive; font-size: 400%; text-align: center; } 

 <div id="cover"> <div class="cover-content"> <h1>Snowfall Design Studio</h1> </div> </div> 

Answer 2

這是覆蓋整個頁面的圖像示例： https : //codepen.io/anon/pen/owJVgq

您需要將背景圖像移至body標簽並添加以下視口：

<meta name="viewport" content="width=device-width, initial-scale=1">

---

如果您希望本部分只是一個部分，並且在圖片下方有更多內容，則是您在尋找的內容： https : //codepen.io/anon/pen/BZvbNe

同樣，您需要添加視口，還需要添加：

body {
  margin: 0px;
  padding: 0px;
}