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 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
background-size property, but no browsers support it yet, even experimentally. This <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!
One thought on “Stretchy background images”
Comments are closed.