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

Question

我已经在网上的所有地方（包括此处）寻找了该问题的答案。 昨天，我花了4个小时尝试不同的“解决方案”，但没有成功。 我只在我进行了详尽的研究和尝试了其他所有内容（包括我在Stack Exchange上找到的所有答案）后，才在此发布。

我正在使用Bootstrap Bootstrap 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);

}}

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

仍然没有骰子。

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

衷心感谢你们。 :)

Answer 1

我要建议的（因为以前发生过此事）是删除固定在移动设备上的背景附件。 它将减小尺寸并看起来更好。 无论如何，我也建议使用至少1680px宽的图像。 这里的帖子不错。