For a project I’m working on I want to have full-width background images regardless of the size of the browser window. Ideally I’d use CSS3’s
background-size property, but no browsers support it yet, even experimentally. This
forum post experimental page shows how to hardcode what I want into a page, but it requires a bunch of extra markup that I’m not prepared to add. So instead I’ve written up a nasty little JavaScript that sorta kinda emulates its behaviour.
The gist of
the script is that it moves the
<body> of a document into a
<div> named
fake-body and sets its background transparent,
wraps that in a <div> named fake-scroller and sets its background transparent, then adds another
<div> named
fake-background that wraps an
<img> containing the original body’s
background-image.
The script works in Firefox and Safari, and would in Opera if I did browser detection—it needs a weird little hack that I don’t quite understand—but I’m pretty much at a loss for finding a way to make it work in any version of IE; I’d hoped making it work would just be a matter of finding the right style object and using
IE7‘s
document.recalc() method.
If anyone out there on the LazyWeb has any ideas—or improvements in general—please chime in!