javascript - 如何缩小大图像（1600x1200）的大小，使其适合大多数屏幕作为背景？

Question

我有一张 1600x1200 的图片

我想用它作为我网站的背景图片。图像应该是静态的，只有内容应该是可滚动的。

这是我尝试过的：

background-image: url('blog-baggrund2.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;

问题是background-size: cover;拉伸它以使整个图像不显示，并将background-size: contain;其最小化以使其不适合整个屏幕（至少在宽度 - 高度上是完美的）

我自己的屏幕分辨率是1600x900

jsFiddle：

http://jsfiddle.net/zJNLJ/4/

请注意，未显示图像底部的所有“黑色”内容。

有什么建议么？

Answer 1

试试这个小提琴：http: //jsfiddle.net/zJNLJ/5/

我改变background-size了100% 100%

Answer 2

background-size 属性可以满足您的需求。“背景尺寸：封面；” 将图像缩放到最小尺寸，使其宽度和高度都适合内容区域

更多@http ://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

也许将图像编辑为具有相等的宽度/高度，然后将其设置为 100%？这样可能最好看。