背景图片不适用于移动设备-CSS

Question

我正在设计一个固定背景图像的网页，并且在移动视图中存在问题。例如，在桌面视图中，完全可以。相反，在移动视图中，图像太模糊并且外观不好。我找不到我犯错的地方。我在此处附加了视图的图像和我的背景图像代码。

桌面：

移动电话：

我的CSS：

body 
  {
  font: 400 15px Lato, sans-serif;
  line-height: 1.8;
  color: #ffffff ;
  background-image: url(images/cover3.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  }

Answer 1

您可以使用媒体查询并更改background-image或使用background-size: cover;

Answer 2

使用此

html { 
 background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
  background-size: cover;
 }
 body{
background: none;
}

此填充适合屏幕尺寸的背景

Answer 3

添加

background-position: center; 
background-size: cover;