Using Alternate CSS Background Images
Accessibility is one of the key drivers for this site. Regular visitors will notice the introduction of a JavaScript-driven CSS colour scheme switcher [cool blue dark light] which stores user preference in a cookie. This implementation is a direct incorporation of the examples in the tutorial by Paul Sowden found at A List Apart. I tend not to reinvent wheels unless they're square and, until I can do better, it's one of the best around.
White on Black Text
When first developing this site I chose black as the base colour scheme since it represented a challenge and an opportunity to take advantage of the Internet's often unique canvas; how many books do you find with white ink printed on a black page.
The First Challenge
Whether you find the scheme attractive or 'sexy' is your personal preference. I'm still unsure. When requesting feedback from my developer forum, I received equal criticism of its legibility, some for, some against — which prompted production of a more traditional white page. Amongst other issues, I had to consider the corporate colours and therefore maintained the blue piping. It was after completing the draft CSS that I encountered my first challenge: how to incorporate the Enigma logo. This came up during the production sketches for the original site. I wanted a home page hyperlink and the logo was a natural candidate. This, of course, meant I was unable to use CSS background images since I wanted it wrappered within the href which would hot-spot the entire image.
CSS Image Switching
But when viewed in the new scheme, the logo appeared cheap and tacky (hover over the image to see what I mean) 
because, as an unbordered transparent gif, it's heavily dependent on the original development antialiasing to produce the smooth character curves. I needed to produce a different image for the light background. All well and good. But how would I now incorporate the image switching? I wanted to use the simple method of declaring the image as background in the CSS but that meant I could not easily maintain the hyperlink. Then a thought occurred to me: all I need is a rectangular area the size of the image in the page markup. A transparent gif would to the trick. Bingo! This resolved not just the hyperlink but maintained alt and title tag accessibility requirements, and the placeholder gif itself is miniscule at just 184 bytes.
One unanticipated bonus: novice net users will be unable to, er... borrow your images since right clicking and copying will clipboard the transparent gif, not the originals referenced in CSS. You could conceivably apply this technique to all images and thwart those less scrupulous, who have neither the energy or integrity to produce their own work or give credit to the artist or developer. Savvy users will be confused momentarily, smile as the bulb illuminates, then head for their browser cache. At least you can make someone happy.
