帶有最大寬度的全屏幕背景圖像

Question

我使用描述的第一種技術here來創建可與瀏覽器按比例縮放的「全屏」背景圖像。

我對圖像容器CSS是：

.fs-img { 
    position: fixed; 
    top: 4.5em; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: url('image.jpg') no-repeat center center fixed; 
    background-size: cover; 
} 

不過，我想我的的1200像素的網站上設置一個max-width。當然，將其應用於身體元素對於圖像沒有影響，因爲它是position: fixed。

那麼是否有另一種方式使全屏幕圖像具有最大寬度，同時仍然保持固定在底部？

這是我正在測試的demo網站。

Answer 1

我覺得你可以達到你想要使用的是什麼以下樣式：

.fs-img { 
    position: fixed; 
    top: 4.5em; 
    right: 50%; 
    bottom: 0; 
    left: 50%; 
    margin:0 -600px; 
    background: url(image.jpg) no-repeat center center; 
    background-size: cover; 
} 

Example