移动网站背景图片的 CSS答案

【问题标题】：CSS for mobile website background image移动网站背景图片的 CSS
【发布时间】：2012-05-17 05:55:52
【问题描述】：

我正在使用 jQuery 移动工具包构建网站的移动版本。

页面将具有垂直布局（仅垂直滚动）。

我想在主页上显示背景图片，即使用户滚动到底部也是如此。

图片为大图，以无重复模式显示。图片必须在页面的左上角显示它的左上角，并尽可能多地显示它的宽度和高度（图片应调整大小，以免被裁剪或最小化裁剪）。

是否可以为任何（或所有）不同的屏幕尺寸和方面提供图像？

【问题讨论】：

【解决方案1】：

您可以使用width 和height CSS 媒体查询根据用户视口的宽度和高度提供不同的背景图像。

如果您在<body> 元素上设置背景图像，并将其background-attachment 属性设置为fixed，那么即使用户滚动页面，背景图像也将保持在相对于视口的相同位置.

【讨论】：

【解决方案2】：

在下面的媒体查询中进行所需的 CSS 更改：

@media screen and (max-width: 480px) {
}

【讨论】：