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!