2011-08-31 125 views
11

我想知道哪个背景图像适合每个屏幕,每个浏览器的最佳解决方案。另外我注意到,大多数技术都会使图像产生一点点影响。 我知道有很多技术可以做到这一点,但我想知道哪些是你认为最好的。 谢谢!css完美的全屏图像背景

+0

我不要认为真的有所有解决方案。您的解决方案将很大程度上取决于您的图像的外观和应用方式。例如,许多背景图像在图像中心的内容区域宽度上留下很大的空隙。而其他背景图像通过内容区域显示。一些重复。背景图像有几种技术,但根据设计的不同而不同。 – Jrod

+0

http://css-tricks.com/3458-perfect-full-page-background-image/ - jquery方法 - 可能是最好的解决方案。 – easwee

回答

23

post from CSS-tricks.com涵盖了全屏幕背景图像的不同技术,并包括老版本的IE(我还没有测试IE修复)的退步。

当我不需要担心支持旧的浏览器,我一般使用CSS3方法:

html { 
    background: url(http://lorempixum.com/1440/900/sports) 
     no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
+0

我知道,方式老,但是有没有一个好的替代方案,不会随浏览器调整大小?希望我能给出一个最小高度的图像 –