带有最大宽度的全屏幕背景图像

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