How do they stretch that background image in such a nice way? I’m not sure I completely understand the code behind.
You don’t need the DIV, the ID should be applied directly to the image itself, that’s where the style is needed. 
Alex - your (granted lightweight) solution does not achieve the effect of the site we are discussing, unless I am not getting what you are saying. I made a quick test page, downloaded the bg image from the site above and added your style like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#backimg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; background: url('bg.jpg')}
</style>
</head>
<body>
<div id="backimg">
</div>
</body>
</html>
What I am looking at (in Firefox) is that the background image doesn’t resize, it simply gets cut off at the bottom (1024x768 for example) leaving not much of the skyscrapers in sight. The original site (with the blown-up code) always shows the entire picture, no matter how small the window gets.
Well, you’ll need a div if you’re trying to make the img the first element in the body.
If you set the img to height and width 100% then it’ll scale that to its parent… if that parent is a content-less div, it won’t grow height-wise. Where does an abso-po’d element take it’s height: 100% from?
I tested it too and it didn’t quite get the effect I was after.
I used it like this:
<div id="backimg"><img src="../images/background2.jpg"/></div>
The image didn’t resize with the screen. I can off course make the image larger.
See the problem is that you used a background image. Until CSS3 is finalised you cannot scale a background image. My solution requires you to use an IMG element (as I stated) on the page and it thereby achieves the same effect (by scaling it to the full screen and placing it under some other content). In the website from the OP they also used an IMG element (in preference to a background image) as that’s the simplest way to achieve the effect.
So you would just place the image tag in that backimg div at th ebegin of the page after the body tag?
It’s documented here:
Whoops Sorry, I wasn’t thinking straight the other day (I had done a 24 hour shift of coding hehe), you’re correct.
Either way, the effect can be achieved, it just requires the on-page IMG element and the right small bit of CSS.
images cannot be direct children of the body.
Couldn’t you just set height and width to 100% on the body element? I’ve used that in the past with plenty of success - no point adding fluff markup.
I would place it at the beginning of the page right after the body (on it’s own) as then it won’t get in the way of other elements.
That is probably one of the weaker methods I’ve seen and it bugs me that people add surplus markup (it’s heavily code bloated). What I do is add an IMG on the page linked too the full sized image path, set position: absolute;, top:0; and left:0; then set width: 100%; and height: 100%; which puts the image in place (and scaling) and finally I set z-index: -1; thereby resetting the position under the content. Works like a charm and doesn’t need any nasty tables, DIV’s or fluff code.
#backimg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; }
remember too that the file size of the image may cause a delay