jquery - 跨越多个 div 的背景图片

Question

我试图在网格中排列的多个 div 上使用单个背景图像。请参阅下面的链接和图片。尽管我在所有 .box-icon div 上使用 background-attachment: fixed; 的方法达到了预期的效果，但我还必须使用 background-size: cover; 以确保它始终覆盖所有 .box-icon，这似乎是覆盖整个文档，而不仅仅是占用的区域在盒子旁边，这使它看起来很难看(见屏幕截图)。调整页面宽度或缩放，演示了我在说什么。

有没有更好的方法来覆盖所有具有单一背景的.box-icon，这样它只覆盖那个小的响应区域并且不会炸毁图像？ CSS/jQuery/javascript 解决方案都被接受!

这是一个link to my website ;相关文件是 ./css/style.css 和 ./home.html。

我有一个 JSFiddle example here .尝试调整查看器窗口的大小以查看。还要注意滚动时背景图像如何出现故障:(

我有一个 album of example screenshots here .背景每次都在变化，其他图像更好地显示了丑陋的放大效果。

Answer 1

---

明确指定背景大小会起作用。

http://jsfiddle.net/derrickmv/snw9j7wf/

.box-icon {
        background-size: 210px 420px;
        background-image: url('http://i.imgur.com/LGKO1Zm.jpg');
        background-repeat:no-repeat;
        background-position: inherit;
        background-attachment: fixed;
        margin: 0 auto;
        height: 100px;
        width: 100px;
        border: 2px solid red;
        z-index: 5;
        display: inline-block;
    }

基本上，根据每个框的大小之和调整背景图像的大小。 (希望我说得有道理)