在 xhtml 中为正文元素设置背景图像(适用于不同的显示器和分辨率)

Question

我对身体元素中的背景图像感到非常困惑。

在 xhtml 中为 body 元素设置背景图像的最佳方法是什么（适用于不同的显示器和分辨率）？

我的意思是，当您设计背景（例如 1024*768）并将其放在带有背景规则的 body 元素中时，我们在不同的分辨率或另一台显示器上（比设计宽）上遇到了一些问题。

如何在不使用 Photoshop 更改图片的情况下解决此问题？

我们应该用JavaScript或jQuery做点什么吗？

Answer 1

我认为您想调整背景大小，使其拉伸并始终全屏显示。如果是这种情况，您可以使用超大号：http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

希望这对你有帮助

Answer 2

最常见的做法是设计更大的图像，考虑到最相关的区域是 1024 宽的中心区域，其余的只是在用户使用较大分辨率时填充页面。正如 Marcel Korpel 所写，使用 css 中的 background-position 属性来应用对齐中心。

Answer 3

听起来

您不仅需要使用css来放置背景图像，还需要调整包含div的大小以符合您的期望。

body {
    background: url(path/to/image) no-repeat center center;
    width: 1024px;
    height: 768px;
}

Answer 4

在 css 中，直到 3.1 版，您可以使用 calc 函数。有了这个，您可以计算适合各个显示器尺寸和分辨率的背景图像的"正确"文件名。