What appears to be 'hole' in a webpage that scrolls with the content and exposes a static background

Writing about web page http://go.warwick.ac.uk/mikewillis/bits/holeinpage

So a few days ago, for reasons I don't recall and probably aren't important, an idea appeared in my head that it might be sort of neat if it were possible to create a webpage that had, well, read the title of this post again. I can't recall seeing this effect anywhere though I think have seen sort of the opposite. The opposite being a PNG containing a transparent portion that has the CSS rule position:fixed applied to it, (which hence remains static as the rest of the content is scrolled), and exposes a a background applied to the body element that scrolls with the content.

My attempt at creating what the aforereferenced title of this post describes is linked underneath said title. If you haven't understood a word thus far take a look at it and scroll up and down. (You will of course need to ensure that your web browser window is sized such that vertical scrolling is necessary to see all the content. I stuck lots of text on here to make that easy.) It turned out to be quite a bit harder than I thought it would be, though this may possibly be a reflection of my CSS skills as much as the difficulty of the task.

I'm quite pleased with the result, although:

• It doesn't work in Opera. At least not the latest version of Opera for Mac OS X. I've put a little effort in to trying to make it work but didn't get anywhere useful.
  
• It doesn't work in Internet Explorer. (But then, what does...) I've put no effort in to trying to make it work because I just can't be bothered. If I was using it in production I'd probably just use IE's conditional statements around some more CSS to completely disable the effect.
  
• It's a bit, well, odd in places. If you look at the source you'll see that one value used in the CSS is used used because that was as large as I could make it without the whole thing falling apart for reason(s) I don't understand.
• It will only work for pages over which you have total control. For example it won't work on a Sitebuilder page because numerous page elements are imposed by Sitebuilder. I couldn't embed the effect in a blog post for the same reason.
• I can't imagine a circumstance under which one would want to use such an effect in a webpage.
  

Mike Willis : 09 Aug 2010 13:18 |  Tags: CSS HTML |  Comments (0) |  Report a problem