Image covers window on page load - php

Question

How do I make an image fit the screen (not a full background image) so that when you scroll down the other content is shown?
An example of what i'm talking about is here:
http://www.microsoft.com/visualstudio/eng/products/visual-studio-professional-2012
In that example look at how the image reacts as you resize the screen and scroll down.
I look forward to your responses.
Thank you.
PS: If you can send a demo of it as well, that would be really helpful. Thank you!

Answer 1

The following JS should help:
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;
Then insert the div wherever you would like you image as so:
<div id= 'backgroundimage'></div>
And finally CSS:
#backgroundimage {background-image:url(image.jpg); width:100%;}