容器流體上的全屏幕背景圖像

我想要獲取背景圖像來填充容器流體div上的屏幕，但它不工作。我做了相當多的研究，但問題在於：我正在處理的網站是在一個我完全沒有能力編輯html的平臺上。這是我的HOA（房主協會）的網站，他們使用了一個神奇的平臺 - HOA Express。我擁有的唯一自定義功能是網站設置頁面上的「自定義CSS」框。 website's url是。容器流體上的全屏幕背景圖像

我之前在網站上有一個全屏幕背景圖片，但是本週他們更新了他們的整個系統，從2002年的某個版本開始，我假設了一個bootstrap版本（我不太熟練），並且在這樣做會消除所有現有的自定義CSS，所以我必須進入並重做一切。

關於我可能會嘗試的任何想法？這甚至有可能嗎？

來源

2016-03-05 Lauren Shwarts

什麼阻止你做：.container液{背景：網址（http://url-to-image.org/image.jpg）不重複; background-size：cover; }或類似的東西 – reinder

我已將您建議的代碼應用到網站，但它並未填滿整個屏幕。請隨時看看我的意思。 –

它看起來像一個貢獻的問題可能是我的圖像正在縮放。該圖像本身是1920x1080，因爲我沒有FTP上傳任何文件，我在谷歌圖像上託管背景圖像。當我在瀏覽器中查看照片屬性時，它顯示爲1,494px×840px。任何想法可能會造成這種情況？ –

-1

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

來源

2016-03-05 06:50:15

這也沒有工作。我不知道爲什麼。 –

請添加一些解釋。目前，您的答案被標記爲「低質量」，可能會被刪除。 –

您在我的示例中缺少background-size: cover。然而，這將「放大」圖像，我不認爲這是你想要的。我想你想要圖像填充視口，並保持在那裏。要做到這一點，你需要設置你的背景以覆蓋「100％」並被修復。

所以基本上你加了這個。

.container-fluid { 
    background-size: 100% 100%; 
    background-attachment: fixed; 
}

來源

2016-03-05 07:00:45 reinder

這是我目前擁有的：'.container-fluid {background}：url（https://goo.gl/KQMhPd）no-repeat center center fixed; - webkit-background-size：cover; -moz-background-size：cover; -o-background-size：cover; background-size：100％100％;} background-attachment：fixed; }'正確，還是不正確？它仍然不起作用。由於某種原因，我的圖像縮小了。 –

這不是你現在擁有的。我現在正在查看您的網站，而您唯一擁有的是'background：url（https://goo.gl/KQMhPd）無重複固定中心' – reinder

刪除您擁有的任何內容並添加以下內容：.container-流體{background：url（https://goo.gl/KQMhPd）不重複固定中心; background-size：100％; } 如果你打算以自己不同的方式做事，那麼在stackoverflow上提問是沒有意義的。 – reinder

容器流體上的全屏幕背景圖像

回答

相關問題