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.)

The Case of the Missing Nav Bar

I will admit, sometimes the problems I encounter in Internet Explorer are simply due to slight differences in browsers’ implementation of HTML or CSS or whatever, and I’m just not properly accounting for the way IE does certain things. Other times, it’s true, they’re due to a flat-out bug in my code that Safari and/or Firefox (usually “and”) will just graciously accept, whereas IE will not. (The cases where IE catches errors that Safari and Firefox permit, however, are rare compared to the vast, cluttered landscape of bad code that IE welcomes with open arms but that Safari and Firefox rightly reject.)

And then there are the cases such as the one I encountered today. There’s no way around it. I can’t find a nicer way to put it, IE is just plain fucked up.

Yesterday I was going along innocently enough, demonstrating to a coworker the site I had been working on for him. As usual I had worked with Safari and Firefox as my test browsers, firing up IE through a remote connection to my PC as needed to make sure things weren’t completely off track. (In a perfect world, I would never have to do this, of course. But, well…) And then, wham! Of course this kind of problem only rears its head when you’re showing your work to someone who has the authority to reject it. I was convinced it was a fluke on his computer, but sure enough when I went back to my desk, I observed the same thing happening in IE on my own PC. Time to hit the brakes once again and go into IE debugging mode.

I tested all of the obvious things. No luck. So I dug a little deeper and started testing the more obscure, but at least logical things. Still nothing. And like so many times before, I was reduced to just randomly trying anything to see if I could get a different result, no matter how seemingly absurd.

Fortunately it only took about an hour to track down the problem this time. But as usual there was no satisfying resolution, no “Aha!” moment as I suddenly recognized a stupid mistake I had made. Oh no. The problem was that the CSS definition for the <div> tag containing the entire body of the page specified a background color. Of course! (No, not of course, as this should not have any impact whatsoever!)

*SIGH* Seeing as how that background color specification wasn’t technically necessary, I removed it. Problem solved. Frustration with Microsoft, higher than ever.

Clear your cache!

Just a friendly reminder to clear your cache… or at least force a refresh. I’ve recently changed a few elements of the design of my site, including the background image. So if you’re still seeing the orange band on the left side (and, now, repeated behind the body of the page), please refresh!

You should be seeing a tiled background of isometric cubes (think Q*Bert), and various font styles have also been updated.

Not that you care. But if I wanted the orange band to still be there, I’d have left it!