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!
Pingback: Petroglyphs » Blog Archive » True Blue