在xhtml中设置body元素的背景图像（针对不同的显示器和分辨率）

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功能。使用此功能，您可以计算出适合各个显示器尺寸和分辨率的背景图像的“正确”文件名。