html`height`和`body```background-image`應該如何處理？

Question

這個問題是從 User Experience Stack Exchange 遷移而來的，因為它可以在 Stack Overflow 上回答。 18 小時前遷移。

我不知道如何更好地總結這個問題，但這就是問題所在。 我按照 Kevin Powell 和其他人的最佳實踐的建議將我的 html height設置為 100%，所以像頁腳之類的東西使用空格並貼在頁面底部，但是它提出了一個問題，如果我想給我的body標記background-image並且當前頁面比視口“高” 圖像將開始每 100% 的視口重復，即由html標記設置的 100%，這並不總是理想的結果。

我應該如何處理這個問題，而不是在我的body標簽上使用background-image ？ 使用更好的平鋪background-image ？

PS我不想訴諸將我所有頁面的內容包裝在body標簽內的包裝器div上......除非它是唯一的解決方案。 body標簽的min-height為 100% 我目前在 Firefox 上。

Answer 1

我認為通過使用很容易解決

background-size: cover;

資源

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

您也可以只使用背景速記來一次設置所有屬性。

資源

https://developer.mozilla.org/en-US/docs/Web/CSS/background

Answer 2

您可以通過設置min-height: 100vh來設置html占據用戶屏幕的 100%。 那么您可以將body height 設置為height: 100%以占據父級的高度（HTML），因此如果內容不大於100vh ，則html和body具有相同的高度。 如果您希望在頁面中滾動時具有相同的背景，您可以設置background-attachment: scroll和background-repeat: no-repeat

像這樣的東西

html {
  min-height: 100vh;
}

body {
  height: 100%;
  width: 100%;
  background-image: url( /* put your background url here */ );
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}
 

MDN 中的背景附件文檔