CSS - 从固定位置改变位置以允许滚动

Question

我目前使用一些代码来显示图片的'缩放填充'类型的方式。我正在使用的代码曾用于一个项目，我曾经为一个网站创建背景图片，现在我想将定位从固定位置更改为允许滚动。不过，我无法确定利润率和规模。

下面是代码：

<div id="Main Page"> 

<div id="Background"> 
<img src="http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU" /> 
<style> 
#Background{ 
position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
} 
#Background img{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
} 
</style> 
</div> 

Answer 1

如果你想使用的背景图像对整个网站，你可以使用这个CSS代码：

body { 
    background-image: url("http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU"); 
    background-attachment: fixed; 
    background-size: 100% 100%; 
} 

根据你的背景 - 您可以尝试使用background-size: cover;而不是background-size: 100% 100%;，以获得更好的效果。

这里是一个小提琴，例如：https://jsfiddle.net/hxefwhpL/