jquery backstretch背景图像与FF / IE

Question

我有一个简单的页面结构，其中一个大图像作为“正在进行中的工作”页面的背景。

问题是在使用Firefox的1152x864分辨率下，背景图像被“截断”，而使用Internet Explorer（和相同的分辨率），一切似乎都能正常工作。

“截断”的意思是徽标，特别是“创意摄影师”的短语，似乎非常接近显示器的左侧。

对于其他屏幕分辨率（1200x800,800x600），图像对我来说也很合适！

该网站是公开的，http://www.antoniafiore.com

我错了什么？你能告诉我哪里错了吗？

感谢您的回复！

这里有一些截图

• 带命令栏的Firefox（好）：http://bit.ly/SKser1
• 没有命令栏的Firefox（错误）：http://bit.ly/QFPCIk
• 带命令栏的IE（好）：http://bit.ly/Q2m8Ub
• 没有命令栏的IE（坏）：http://bit.ly/VxGgD4

Answer 1

如果您可以使用CSS 3，我建议您将这样的风格应用到您的背景中：

div#bg
{
    background-image: url('bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

无论当前屏幕分辨率如何，这都将确保您的图像正确缩放。我使用它在我的网站上显示高分辨率图像，我不想缩放或切碎不正确。

background-size属性特定于CSS 3，但其余属性与CSS 2兼容。此外，您不需要为此使用jQuery。它可以用直接的CSS 3来完成。