用于全宽背景的图像的适当大小

Question

我正在寻找有关将图像用作页面背景部分的宽度的说明。例如，在具有固定大小内容部分的可变宽度设计中，通常会将背景图像附加到页面主体，然后将跨越整个浏览器宽度的附加图像设置为（居中）背景图像在其他 div 上。

我大致了解这是如何工作的，但我正在寻找有关制作图像宽度的指导。我见过一些网站使用 4000 像素宽的背景，甚至 8000 像素宽的背景，这比任何用户的浏览器窗口都可能宽。

这种技术是否依赖于一些潜在的怪癖，这是驱动巨大宽度的原因吗？

我也很好奇为什么 div 的背景图像能够落在页面上其他元素流之外的逻辑。同样，我知道它有效，但我很好奇为什么。

Answer 1

当使用大照片作为背景图片时，我不会大于 2560x1440px，这是 27 英寸 iMac 屏幕上的分辨率：http://support.apple.com/kb/sp623。1366x768px 是最常见的显示器分辨率，其次是 1920x1080px：@ 987654322@。

如果您有一个固定宽度的内容部分，并且您希望图像填充该部分，请将图像设置为该部分的大小并使用 css 对其进行缩放：http://css-tricks.com/perfect-full-page-background-image/。我假设您将照片用作背景图像，而不是重复图案。在这种情况下，您只需在重复之前将图像缩放到图案的大小。