正确调整用于全宽背景的图像大小

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

我大部分都明白这是如何工作的，但我正在寻找制作图像的宽度的指导。我见过使用4000像素宽背景的网站，甚至是8000像素宽的背景，比任何用户的浏览器窗口都要宽。

这种技术是否依赖于一些潜在的怪癖，是什么驱动大量的宽度？

我也很好奇背后为什么div的背景图像能够落在页面上元素流的其余部分之外的逻辑。再次，我知道它可行，但我很好奇为什么。

2013-03-27 sporker

当使用大照片作为背景图片，我不会去大于2560x1440px，这是一个27" 的iMac屏幕分辨率：http://support.apple.com/kb/sp623 1366x768px是最常见的显示器分辨率，其次是1920x1080px：http://www.w3schools.com/browsers/browsers_resolution_higher.asp。

如果你有一个固定宽度的内容部分，你想要一个图像来填充该部分，使图像的大小和使用CSS来缩放：http://css-tricks.com/perfect-full-page-background-image/。我假设你正在使用一张照片对于背景图片而不是重复图案，在这种情况下，您只需将图片缩放到图案的大小，然后重复。

来源

2013-03-27 18:14:10 PixelGraph

因此，假设对于我见过的那些巨大的4000+像素图像，我没有实际的目的吗？也只是为了澄清，我的问题的第二部分不是关于一个div内的图像，而是甚至是页面上的背景 - 特别是，如果它是居中且比浏览器窗口宽得多，为什么扩展体宽度由于背景不会抛出所有的后裔定位方式？ – sporker 2013-04-27 05:41:26

正确调整用于全宽背景的图像大小

回答

相关问题