javascript - 为什么我的背景图片这么大而且拉长了？

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%;
}

请参阅此处的文档。

Answer 3

您可以尝试使用

background-size: 100% 100%;

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