Thingamablog Blog

Translucent Title Panels

I like the look of the translucent panels behind my titles in my other blog. Here is a link so you can see what I mean:

Nothing Happens At Ten 

It took a bit of doing to get that look. At first I tried the obvious and made the images translucent using .png files, but the browsers treat such images differently, and some browsers ( IE ) posted the images as opaque, which destroyed the look. So I worked to find a workaround that would display properly in all the browsers. What I came up with was two opaque .jpg files that I created from a single background tile. The first one is called "nhat-bodybg.jpg". It is used for the basic background of the blog. Here is the image:

I pulled that image into The GIMP, and I used the Brightness and Contrast tool to darken it just slightly. Then I saved it as the file "nhat-titlebg.jpg". Here is the image:

You can see that it is just ever so slightly darker than the other image. That image is used in my theme as the background for the titles. The title images overlay the background image, and since they are opaque, they totally cover the background. But since I align all of the images on location 0, they are overlaid perfectly on the screen, and the darker title bars appear to be translucent because the patterns line up with the underlying background image.

This technique appears to work in all the browsers, and I like the look of it.

BTW, I figured out how to display the images shown above without importing more copies of them. I simply typed the URL's of the images directly into the image wizard. I used Filezilla to find the images online and then entered the paths manually.