Image Positioning

This article was originally published on 21-Sept-2006 within a previous journal of mine (of which I choose not to mention.)

This idea made perfect sense when I thought of it. Thirty seconds to write it, Twenty seconds to determine if it worked. It does.

CSS

blockquote .angry { background-color:#C00; }
blockquote .happy { background-color:#69F; }

BODY

<blockquote class="happy">
Test this idea to see
how it works.
</blockquote>

Here is the style-sheet for putting a quote image at the beginning and end of a quote, with only one image.

BODY

<p class="topquote">
<span class="endquote">
Two wives is 
two too much.</span>
</p>

Looks deceptively simple. That’s because the style sheet does the work. Here is the style sheet:

CSS

p.topquote { 
background:url(quote.gif) 0 0 no-repeat; }
p span.endquote { background:url(quote.gif) 100% 100% no-repeat; }

The image is then purpose-built for the parameters of your website, whereby a left-curly quote is in the top left corner and a right-curly quote is in the bottom right corner of the same image. In some cases, this image might be quite high and wide – but with the right multimedia software it can be kept to under 2 kilobytes.

For those who are wondering: The idea came from reading portions of Eric Meyer’s greatest smallest book: “CSS Pocket Reference“.

Ok, so there is probably nothing original or amazing about the code, nor is it probably anything new for most experienced coders. You are most likely also wondering why I took so long to work this out. Well, hey, I just never needed to know before. And when I did, it took as long as it takes for you to read this to discover a simple way of achieving this goal!