{"id":754,"date":"2007-05-20T13:36:43-04:00","date_gmt":"2007-05-20T17:36:43+00:00","guid":{"rendered":"http:\/\/peterjanes.ca\/blog\/2007\/05\/20\/stretchy-background-images\/"},"modified":"2019-05-03T08:49:47-04:00","modified_gmt":"2019-05-03T12:49:47+00:00","slug":"stretchy-background-images","status":"publish","type":"post","link":"https:\/\/peterjanes.ca\/blog\/2007\/05\/20\/stretchy-background-images\/","title":{"rendered":"Stretchy background images"},"content":{"rendered":"
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<\/code> property<\/a>, but no browsers support it yet, even experimentally. This forum post<\/a><\/del> experimental page<\/a><\/ins> 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.\n\nThe gist of the script<\/a> is that it moves the <body><\/code> of a document into a <div><\/code> named fake-body<\/code> and sets its background transparent, wraps that in a <div><\/code> named fake-scroller<\/code> and sets its<\/em> background transparent, <\/ins>then adds another <div><\/code> named fake-background<\/code> that wraps an <img><\/code> containing the original body’s background-image<\/code>.\n\nThe 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<\/a>‘s document.recalc()<\/code> method.\n\nIf anyone out there on the LazyWeb has any ideas—or improvements in general—please chime in!<\/div>
<\/div>","protected":false},"excerpt":{"rendered":"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…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":[],"venue_id":0},"categories":[3],"tags":[],"kind":false,"_links":{"self":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts\/754"}],"collection":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/comments?post=754"}],"version-history":[{"count":1,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts\/754\/revisions"}],"predecessor-version":[{"id":1443,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts\/754\/revisions\/1443"}],"wp:attachment":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/media?parent=754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/categories?post=754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/tags?post=754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}