Question

我正在尝试建立一个非常简单的单页网站。这是一个线框模型：http://i57.tinypic.com/34j8yoo.jpg

我有一个非常大的背景图形（1920 x 1080），我希望它覆盖整个页面，当浏览器窗口变小时，我希望滚动条出现（或类似的东西;重点是bg调整大小）。该页面中间还会有一些标题文字和一个标识，下面会有一个按钮，之后会有一些文字。

我试过了：

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 {
    padding: 0;
    margin: 0;
    background: #f8f7e5 url('../images/background.jpg') no-repeat center top;
    background-attachment:scroll;
    width: 100%;
}

但是文本不能很好地发挥作用。

所以我的问题是，实现我想要做的最好的方法是什么？

Answer 1

我会使用background-size：cover来表示我的背景图片。除IE8外，它得到了很好的支持。我还会在媒体查询中设置背景图像，这样我就可以有一个或多个较小的图像用于较小的分辨率，并且只在最大的设备上使用较大的图像。这样，小型移动设备无需下载巨大的1920px x 1080px图像。

您的媒体查询也可用于设置不同设备的文本。例如，您可以为屏幕顶部的文本设置3个div，每个div设置为33.33333％的宽度并向左浮动，以便它们并排放置在桌面大小的屏幕上。在最小的设备上，例如处于纵向模式的移动电话，尽管您可以将每个列设置为100％，以便它们彼此叠加。

它需要一些周到的计划，但是如果你遇到麻烦，请坐下来用铅笔和一张纸，并制作3-5个模型，以了解你希望看到不同屏幕尺寸的东西。它可以像移动设备一样简单，一个用于平板电脑设备，另一个用于桌面设备。为最小的设备大小构建css并使其看起来相当不错，然后为下一个最大类别的屏幕创建媒体查询并开始调整css以适应这些大小的设备，然后执行下一步。

Answer 2

以下是我认为你可能正在寻找的一个例子。我使用了background-size:100% 100%;，因此如果图片尺寸不够大，它会在您调整页面大小时扭曲图像。但它始终涵盖整个背景。希望这有帮助！

http://jsfiddle.net/JF9me/

全屏幕背景，单页网站

2 个答案: