为什么我的背景图片如此之大并且伸展开来？

Question

这就是现在的样子：

奇怪的是，图像似乎一直在屏幕上伸展。

它应该是这样的：

我正在使用stellar.js一个jquery插件来使背景图像以与内容不同的速度滚动。但我不确定这是不是问题。无论如何，这是CSS：

.large-bg-1 {
background: url(images/large-bg-1.jpg) repeat 0 0;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-position: 50% 0;
position: relative;
height: 294px;
width: 100%;
}

直播网站：http://www.hfwebdesign.com/?ModPagespeed=off

如何将图像恢复原始尺寸，我该怎么办？或者至少，让它变小？

Answer 1

尝试background-size: 100%;

对于实例，

.large-bg-1 {
background: url(images/large-bg-1.jpg) repeat 0 0;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-attachment: fixed;
background-position: 50% 0;
position: relative;
height: 294px;
width: 100%;
}

希望这有帮助。

Answer 2

将类更改为此类，它将修复背景的大小。

.large-bg-1 {
    background: url("images/large-bg-1.jpg") no-repeat fixed 50% 0 / 100% transparent;
    height: 294px;
    position: relative;
    width: 100%;
}

See doc here.

Answer 3

您可以尝试使用

background-size: 100% 100%;

链接：http://www.css3.info/preview/background-size/