New Header Images

I’ve replaced the header images both on this blog and on my Foundation blog. I had to finagle a half-transparent box just to make the text readable on both sites, but I don’t think it looks half bad (note that I haven’t looked at it in IE yet). One down side is it breaks when you increase or decrease your text size. I’d love to rip this all down and start over, but I don’t have the time, and I think this small change will keep me satisfied with this layout for a few months more.

The image here is a picture I took yesterday from my office window on the eighth floor. It is the wasatch mountains on the East side of the Salt Lake Valley (specifically, Mount Olympus just left of center and Twin Peaks off to the right). You can find the original photo here. The image on my Foundation blog is the inner workings of a Burlington Bulldog railroad watch. I went looking for photos of pocket watches1 and found this one in Kevin Trotman’s Flickr photo stream. It’s licensed under a Creative Commons license and I’ve given Kevin proper attribution in my blog footer, so I am using it with permission. You can find the original photo here.


  1. Why a pocket watch? For the connection, see the Teleological argument for the existence of God
  • ScW

    Yep… partial transparency (.png) and such looks great when it works. Looking here on IE (that I don’t normally use), the box looks pretty bad but the real problem is the menu. The tabs are almost impossible to read. I can send you a screenshot if you need one. Although there is that site out there that will do that for you (can’t remember the url off the top of my head though).

    Carry on…

  • ScW

    On my technocal site… DevPicayune, I wanted to use partial transparency and I think this might could work for you. Instead of using a .png on top of the header… you can edit the header image with the partially transparent section and just position the text over that spot in the header. You’d achieve the same effect and it would work in IE.

  • Cross-browser partial transparency is mess, though I worked out a pretty good solution for a site I was hired to work on. Partially transparent pngs don’t work in IE, and using CSS for partial transparency is a bit buggy in firefox/mozilla/etc. (You can’t keep the transparency properties from being inherited by the children.)

    What I ended up doing was use partially transparent pngs for all that stuff. Then, below where I link to the normal css file, I have a link to an IE specific css file by using this syntax:

    This keeps it XHTML compliant without having to resort to ugly hacks to confuse IE. In the IE specific ones, I overwrite the background of the divs so that they are transparent rather than the png, and then assign a color and use IE‘s CSS transparency keyword to make it look the same.

    background-color: #252525;
    filter:alpha(opacity=89);
    background-image: transparent;

    I don’t use IE very often either, but I have found that the IE Tab extension is much easier and quicker than the IEView one, so it’s easy to test my code in both browsers.

    The site where I did the transparency stuff is at bogeysclub.com. I can’t recommend really any of the content on the site (it’s a nightclub), but you can view the css and the source if you want there.

  • Should have previewed, whoops. But the syntax I used to include the specific IE one is available here.