The incredible ever-changing page background

Here’s more stuff that web designers might find interesting and everyone else will find either irrelevant or won’t even notice.

I kind of liked the abstract image I had as the background of the pages in this new site design (which, if you’re interested, can still be found on my IE6 users’ “welcome” page), but I was never completely satisfied with how it was just shoved into the upper left corner of the window. So I took a horizontal cross-section from a very colorful portion of that design, stretched it out into blurry vertical stripes, and made it the new background.

But, you may notice, there’s a bit more to the background than that. Once again it’s the magic of PNG alpha channel transparency at work.

The background of this page is actually the product of 3 separate images (a JPEG at the “back” and two transparent PNGs over it) overlaid on top of each other. In the bottom layer is the aforementioned blurry multi-colored vertical stripe image (JPEG). It’s 1600 pixels wide by 20 pixels high, tiled.

Next above that is my “Close to the Edge” image, a gradient from the teal of my color palette (at the bottom) to transparent (at the top). For a while I toyed with simply using this as a teal-to-black gradient, and I have to say it looked quite nice, but there’s not enough else going on visually with the design of the page, so a solid black band at the top of the page came off a bit boring. So, the gradient as an overlay on the stripes. This image is 50 pixels wide by 600 pixels high, and it’s fixed to the bottom of the window and tiled horizontally.

Above that is the (probably overused) “NTSC scanline effect” image, which produces the horizontal stripes. Unnecessary and as I said, probably overused, but it’s still kind of cool looking. Or would have been in 1998 at least. Call me old fashioned, if you think 1998 is old. (OK, in the web world, it’s ancient history.) This is a 20×20 image, also tiled.

So, how does this all fit together? Well, the way I do it is by applying the JPEG to the <body> tag, which is immediately followed by a pair of nested <div> tags that fill the window and exist for the sole purpose of overlaying the other background layers. Then inside of that, the rest of the page’s HTML appears as normally.

Looking at it precisely, the CSS file contains the following:

body {
  background: #000 url(“images/body_bg_stripes.jpg”) top left repeat fixed;
  margin: 0;
  padding: 0;
}
#body_overlay {
  background: url(“images/body_overlay_bg_ctte.png”) bottom left repeat-x fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#body_overlay_2 {
  background: url(“images/scanlines_25_black.png”) top left repeat fixed;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

And the HTML for the pages follows this basic structure (with lots of stuff cut out in this example, of course):

<html>
…HEAD TAGS HERE…
<body>
<div id=”body_overlay”>
<div id=”body_overlay_2″>
…PAGE BODY HERE…
</div>
</div>
</body>
</html>

What’s really cool about this is that it results in a background pattern that, as a single image, would need to be at least 1600 pixels by 600 pixels (in other words, very large in both dimensions and file size), and even then it would not be able to achieve exactly what you see here because the gradient is fixed against the bottom of the window. In fact there’s absolutely no way to produce the background of this page without transparent PNGs. The 1600×600 image would easily be a few hundred kilobytes at a fairly low-quality compression level — far too big to justify, especially since it would still end up looking like crap. But as it is, the three images are 6857, 135, and 714 bytes respectively — less than 8 kilobytes combined. Sweet! (OK, it’s pathetic that I think something like this is “sweet,” but there it is.)

This proves my theory!

Further knocking Apple down from its pedestal (not that I’m not still a rabid fanboy as mentioned in the previous post), we have this further proof of my theory that although Steve Jobs usually has impeccable instincts, once he gets something stuck in his craw, no matter how outlandish it is, Apple simply must go through with it.

I’ve been thinking this a lot in regards to the grand trilogy of Leopard GUI design decisions that have been widely criticized by the world of Mac users (including myself): the translucent menu bar, the 3-D Dock, and the Stacks icons. But now here’s some proof that this really does go on (if you accept it as proof, which I do in this case), from the hardware side. The left side, to be specific, of the current MacBook line. I happen to be sitting in front of one right now, and I can vouch for this. The left side is “squishy,” right where those two screws are. They’re clearly not attached to anything! Therefore, they must be purely cosmetic.

Which is pretty ridiculous, when you think about it.

When nothing really isn’t nothing

I’ve spent the better part of the past two work days trying to figure out a weird scenario where a few elements in a heavily CSS-based page layout are inexplicably shifting a few pixels to the right. It is generally happening in pages that have content in the left column, whereas pages that do not have content in the left column are displaying normally. However, there are a few pages with empty left columns that still don’t display correctly. Comparing the source code, I discovered that some of the empty left columns nonetheless contain comment tags and those comment tags are what seems to be making the difference. But strangely, it’s the pages that have left column content or have completely empty left columns that are breaking, whereas the only ones that are not breaking are the ones where the left column block contains only comment tags.

Once again, the mysterious Microsoft voodoo amazes and confounds me.