ObHacks and fun with giant stretchy backgrounds

So, "back in the day", before the web had really entered the popular consciousness, there was Usenet, a vast collection of discussion groups. Unlike today's forest of web-based forums where each has its own UI and culture, Usenet offered a single login, B.Y.O.interface, and semi-universal set of "basic netiquette" guidelines to talk about a huge array of different topics-- not to mention sporting a generally smart and net-savvy userbase. Its a bit of 'Net culture I miss.

One of my favorite newsgroups was "alt.hackers". It was "self-moderated" and you had to do a certain trick in order to post there. (This was of course using the original meaning of "hack": a clever, technically adept stunt, as opposed to the other meaning of "breaking into someone else's system".) There was a tradition there where if your primary content wasn't about hacking, you would include an "ObHack" (Ob as in Obligatory), some small little feat you had accomplished. Sadly, I haven't posted on alt.hackers for a long time (in part because I didn't have a good alternative when my alma mater gave up its Usenet feed) but I bring it up to say the following would have been a good ObHack (or two...)

The background is: A while ago the comic artist James Harvey was accepting commissions and I had him do a take on my personal avatar, Alien Bill. He's been my "signature" character for over twenty years now... usually he looks like

or even

but Harvey turned him into this magnificent Strider o'er the Earth:

I love that, especially at larger sizes, so I decided to use it as the backdrop at my portfolio site http://alienbill.com/, with this img tag

<img class="stretch background" src="bigbill/bigbill.jpg">

and this CSS to make it fill the complete width of the browser window:

.background {
    width: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

I was pretty happy with the result!  I was inspired by some uses of oversized images I've seen on other sites, but I think in general designers shy away from them, possibly concerned about load times. Still, a 1000x1500 image is only 200K and can look pretty good stretched larger than its natural size.

I had one problem though, which is if the browser is narrow relative to its height, the image ends, and you see the background color. For a while I punted and just had the background be a nice sky blue, so that as the image first loaded, the transition from background to image would be minimized. Still, it looked ugly at the bottom where the image ended and the "sky" picked up again. The ObHack, then, was the following code:

$(document).ready(function(){

$(".stretch.background").load(

function(){

$("body").css("background-color","#ABF36B");

}

);

});

So now the background starts blue, but when the image finishes loading, the background changes to the green, so it's a nice grassy area beneath. I also chopped the image and touched it up so the transition from image to flat color was masked. (Come to think of it, I could have considered a grassy repeating pattern for the background, but I think the flat green works well enough.)