在手机和平板电脑上引导背景模糊

Question

我已经在网上到处寻找这个问题的答案(包括这里)。昨天我花了 4 个小时尝试不同的"解决方案"，但无济于事。我只在我详尽地研究和尝试了其他所有内容(包括我在Stack Exchange上找到的所有答案)后才在这里发布。

我正在使用引导引导 v3.3.4

我有一个带有整页背景图像的网站。当我在 Firefox 或其他桌面浏览器中调整窗口大小时，即使一直调整到最小尺寸，背景图像(砖墙)也会完美地调整大小和渲染。

但是，当我在手机(LG)或iPad 5上打开网站时，背景很大，只显示背景的一部分，非常模糊。(即，一块非常模糊的砖的一小部分！

这是我的CSS文件中的代码：

body {
background: url(../img/bg.jpg);
background-repeat: no-repeat; 
background-attachment: fixed;
background-size: cover;    

}

我还尝试根据网络上找到的"解决方案"添加此内容。它什么也没改变。

body:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url(../img/bg-mobile.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

我尝试创建一个 768px 宽的图像并插入以下内容：

@media screen and (max-width:768px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
/* Location of the image */
background: url(../img/bg-mobile.jpg);

} }

请注意，网址指向专门为移动设备创建的文件。

还是没有骰子。

我深感沮丧和困惑。请记住，我是一个自学成才的程序员，所以非常感谢实际的代码示例/清晰的解释。

衷心感谢你们。:)

Answer 1

我想建议(因为它以前发生在我身上)是删除固定在移动设备上的背景附件。它会减小尺寸，看起来更好。无论如何，我还想建议使用至少 1680px 宽的图像。这是一个很好的帖子。