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

时间:2013-03-27 17:41:59

标签: css html background

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

我在很大程度上理解这是如何工作的,但我正在寻找关于制作图像的宽度的指导。我看过网站使用4000像素宽的背景,甚至8000像素宽的背景,这比任何用户的浏览器窗口都要宽。

这种技术是否依赖于一些潜在的怪癖,是什么驱动了巨大的宽度?

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

1 个答案:

答案 0 :(得分:1)

当使用大照片作为背景图像时,我不会超过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/。我假设您正在使用照片作为背景图像而不是重复图案。在这种情况下,您只需在重复之前将图像缩放到图案的大小。