跨越多个 div 的背景图像

Question

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

有没有更好的方法可以用一个背景cover所有.box-icon，这样它就只响应地覆盖了那个小区域，而不会炸毁图像？CSS/jQuery/javascript解决方案都被接受！

这是我网站的链接;相关文件./css/style.css和./home.html。

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

我这里有一个示例屏幕截图的相册。背景每次都会变化，其他图像更好地显示了丑陋的爆炸性。

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

基本上，沿着每个框的大小总和调整背景图像的大小。（希望我说得有道理）