图像覆盖页面加载的窗口

Question

如何使图像适合屏幕（不是完整的背景图像），以便在向下滚动时显示其他内容？

什么我谈论的例子是在这里：

http://www.microsoft.com/visualstudio/eng/products/visual-studio-professional-2012

在那个例子看，你调整屏幕和向下滚动影像如何反应。

我期待您的回复。

谢谢。 PS：如果你也可以发送它的演示，那真的很有帮助。谢谢！

Answer 1

下JS应该有所帮助：

function resizeBackground() 
{ 
    var targetWidth; 
    var targetHeight; 

    if (typeof window.innerWidth != 'undefined') 
    { 
     targetWidth = window.innerWidth, 
     targetHeight = window.innerHeight 
    } 
    else if (typeof document.documentElement != 'undefined'&& typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) 
    { 
     targetWidth = document.documentElement.clientWidth, 
     targetHeight = document.documentElement.clientHeight 
    } 
    else 
    { 
     targetWidth = document.getElementsByTagName('body')[0].clientWidth, 
     targetHeight = document.getElementsByTagName('body')[0].clientHeight 
    } 

    var background = new Image(); 
    background.src = document.getElementById("backgroundImage").src; 
    var target = document.getElementById("backgroundImage"); 
    var sourceWidth = background.width; 
    var sourceHeight = background.height; 

    if (targetWidth/sourceWidth > targetHeight/sourceHeight) 
    { 
     target.width = targetWidth; 
     target.height = sourceHeight * (targetWidth/sourceWidth); 
    } 
    else 
    { 
     target.width = sourceWidth * (targetHeight/sourceHeight); 
     target.height = targetHeight; 
    } 
} 
window.onload = resizeBackground; 
window.onresize = resizeBackground; 

然后插入DIV无论你想你的图像像这样：

<div id= 'backgroundimage'></div> 

最后CSS：

#backgroundimage {background-image:url(image.jpg); width:100%;}