Tag Archives: Pixels

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 one just may take the cake…

First, a qualification: Since I got a flat-panel display at work, I no longer have my PC connected directly to the display; I view the PC’s video output via Remote Desktop Connection on my Mac. I’ve learned over time that RDC does not provide a direct, unaltered feed of the PC’s video. For understandable reasons (faster screen refresh), but by perhaps unjustifiable methods, RDC re-renders parts of the video display. The result is that you do not see a pixel-perfect (or even simply downsampled) representation of the actual PC video; it appears to be redrawn completely for network transmission.

In particular, this does funky things with Internet Explorer’s output. Last year I spent a few hours trying to figure out why borders around my buttons were extending by one pixel both down and to the right, until I realized that on the actual PC’s display this wasn’t happening… it was just an RDC quirk.

With that out of the way, I have to admit that perhaps my current problem is an issue with RDC and not with Internet Explorer. But either way, it’s a Microsoft problem.

After making some CSS adjustments to a page I was working on, I noticed that the main body seemed to be extending 3 pixels wider than it should be. Further testing revealed this only happened on certain pages, and after resorting to commenting out each CSS class one-by-one, I tracked this down to an inline class that simply italicizes text. So, for whatever reason in the grand Microsoft scheme, a word or two in italics can cause a much larger section of the page (at least 2 or 3 levels up in the document tree) to expand by 3 pixels.

Again I ask… WHY???

And again my cry for explanation goes unheeded. Time for another lame workaround?

Addendum: As it turns out, in this particular case a workaround will not be needed. I went to our test PC and confirmed that this is an RDC glitch, and not an Internet Explorer one.