gyrmination

Just stumbled upon an interesting usage of an attached background image, through exploring my hi5 network.

Here’s the css key to making it work:

body {
    background-image: url("http://some.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: bottom right;
}

Cool, like markered transparency.

But wouldn’t it be cool if the image could overlay the textual content like a real overhead projector transparency?

I grabbed the image and opened it up in The Gimp. Using the Select contiguous region tool, I selected the white regions in the image. The I invoked the Layer>Transparency >Color to Alpha command. Next, I resized it using Image>Scale Image. Finally, I saved the image as a png file.

I added some special css to wp-content/themes/default/style.css to address deficiencies in IE6. This is hackish and took a while to figure out:

body {
    height: 100%;
    overflow-y: auto;
}
#fixedDiv20050801 {
    position: fixed;
}
* html #fixedDiv20050801 {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

The following code (sans linebreaks which are automatically converted into <br/> tags by WordPress) is contained within this blog entry. It’s a little ugly to allow interoperability with IE6, which does not currently have good support for png transparencies:

<div id="fixedDiv20050801">
<!--[if gte IE 6]>
<img src="/home/blog/wp-images/blank.gif"
 style="position: absolute;
 bottom: 0px; right: 0px;
 width: 233px; height: 220px;
 z-index: 3;
 filter:
 progid:DXImageTransform.Microsoft.AlphaImageLoader(
 src='/home/blog/wp-images/escape.png',
 sizingMethod='scale');"
 alt="IEscape" />
<![endif]-->
<img src="/home/blog/wp-images/escape.png"
 style="position: fixed;
 bottom: 0px; right: 0px;
 width: 233px; height: 220px;
 z-index: 3;
 filter: alpha(opacity=0);"
 alt="Escape" />
</div>

Yes the image can be a bit distracting and, more importantly, blocks clicking functionality over the display area, but it is cool to know that the effect is quite easily achieved achievable in current browsers.

On another grimace-inducing note, testing this made me to realize that <pre> blocks overflow in an unpleasant way in IE. This is a problem for another day. Resolving png quirks and css incompetencies is enough for one day! Or maybe I’ll just wait until IE7, which promises better standards compliance including alpha channel support for png images.

References:

http://www.xanga.com/k0be
Design-Ireland.net: Working With PNG
CSS position:fixed; for IE6
Star html Selector Bug
MSDN: About Conditional Comments

This entry was posted on Sunday, July 31st, 2005 at 17:56 and is filed under Code, Observation. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.