如何为一页长的网站制作 CSS 响应式背景图片答案

【问题标题】：How to make a CSS responsive background img for a long one page website如何为一页长的网站制作 CSS 响应式背景图片
【发布时间】：2016-05-14 18:46:40
【问题描述】：

我已经尝试了两天来使背景图像响应移动设备。这是一个很长的主页（大约 8000 像素）。整个页面的内容有一个div父级“background_div”。我都尝试过，大小封面或包含标签，img 得到了像素化，就像它会被放大一样，内容是响应式的，但背景 img 让我头疼。我需要它来识别设备宽度、缩小并保持固定而不是沿着 8000 像素长的页面拉伸。谁能告诉我这里出了什么问题？

#background_div {
	background-image: url('home.jpg');
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
}

/*It just won't scale to the divice width and height*/

&lt;div id="background_div"&gt;

【问题讨论】：

标签： html css responsive-design background-image responsive-images

【解决方案1】：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

将这些设置为 cover 将拉伸图像以适应容器，无论它有多大。这就是导致你拉伸的原因。

将它们设置为自动，或者根本不设置它们，如果您希望图像保持其原始大小。

【讨论】：

它在笔记本电脑上运行良好，当最小化以检查它是否有响应时，但现在在我的手机上，它居中到中间，只占一小部分，大部分页面都是白色的，我是新手响应式 css，你能再给我一个关于如何完成这项工作的建议吗？
找到了一个不错的解决方案，它需要进行一些小改动，但似乎可以正常工作，

【解决方案2】：

CSS2

如果您需要将图像放大，您必须在图像编辑器中编辑图像本身。

如果您使用 img 标签，您可以更改大小，但如果您需要图像作为其他内容的背景（并且它不会像您想要的那样重复），那不会给您想要的结果...

CSS3 释放力量

这可以在 CSS3 中使用 background-size 实现。

所有现代浏览器都支持此功能，因此除非您需要支持旧浏览器，否则可以这样做。

支持的浏览器：

Mozilla Firefox 4.0+ (Gecko 2.0+)、Microsoft Internet Explorer 9.0+、Opera 10.0+、Safari 4.1+ (webkit 532) 和 Chrome 3.0+。

#background_div {
    /* width: will stretch to width / height of element */
    background-size: 100% 100%;
}

【讨论】：