This page has a background image scaled to fit the browser window which is suprisingly tricky to do with CSS. The methods used are not universally portable to different browsers so if you don't see an image of the entire hut I'd like to hear from you. Alternativly if you just want to see images of the hut then go to the Hut Gallery.
As for why I don't use this as the default page background apart from the non-portability, did you notice a pause when switching to this page ? It would seem that some browsers take a considerable amount of time to scale the image.
I've pinched ideas from several places including in no particular order:
Essentially you fake a scaled background image by using a foreground image that is positioned behind all the other foreground data.
Two attributes are used to position the image behind all the other
foreground output. Having to use two is a hint at the poor browser
portability. Firstly in the style declaration for the image itself we have
"z-index: -1;" placing it one step further away from the
user than the default. Unfortunatly this does not work for some Mozilla
based browsers so we also have to add
"-moz-opacity: 0.99;" in the body style
declaration block.
The image itself is scaled by specifying
"height: 100%;" and "width: 100%;" to
scale to the frame size. This will unfortunatly distort the image if the
aspect ratio differs greatly between source and target. The image used in
this example starts out at 1600x1200.
Finally some fiddling with the image positon is required
to persuade it to align with the display frame. The combinations of
"position: relative;" and
"position: absolute;" are required due to poor support
for "position: fixed;" in some browsers as is setting
html's height and anchoring the output location with a
non-blank space.
The file style fragments look like this:
Body style setup
body { ... background-color: transparent; -moz-opacity: 0.99; margin: 0px; padding: 0px; position: relative; height: 100%; } html { height: 100%; }
Background image style
img#background { height: 100%; width: 100%; z-index: -1; position: absolute; }
Background image in main text
<body> <img id="background" src="background_image.jpg" alt="" />
Note also that as most likely seen here. The image is scaled to the visable frame and does not repeat if the text requires you to scroll past this limit.