使身体背景响应答案

【问题标题】：Making the body background responsive使身体背景响应
【发布时间】：2017-08-28 04:36:16
【问题描述】：

我已经处理这个问题有一段时间了，试图自己解决它，但我只是无法缝合以深入了解它。基本上，我有一个在 body 标签中使用的背景。但是，只要我在背景上添加文本，图像就会在移动设备上失真、像素化并且有点放大。

这是我用于正文背景图片的 css 代码：

body {
    background-image: url(background.png);
    background-repeat: no-repeat;
    background-position: center 70px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

任何帮助将不胜感激。

【问题讨论】：

你能发一些截图吗？当然，如果它太小并且你试图在整个背景上拉伸它，它会变得像素化。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。请参阅如何创建Minimal, Complete, and Verifiable example。
您好，图片不是太小了。它是 1900 x 1200 像素..这就是为什么我对它为什么会被像素化和失真感到困惑......
正如 Lazar 和 andreas 指出的那样：请提供更多信息，例如截图和 HTML 代码

标签： html css responsive-design responsive

【解决方案1】：

通过固定图像并在其上定位中心位置，图像将在所有显示模式中居中。

html,body{
 height: 100%;
}
body{ 
 background-image:url(http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg);
 background-position: center center;
 background-repeat:  no-repeat;
 background-attachment: fixed;
 background-size:  cover;
}

【讨论】：

您好，这很有效，现在一切看起来都很棒！非常感谢您的帮助！