Overlay/watermark on top of variable-size image?
Posted on 2007-04-03
The web is full of answers on how to use CSS to create a graphical overlay on top of another graphic---but you have to know how big your bottom graphic is. I don't know how big my bottom graphic is. Both size and aspect ratio are variable, up to 100px on either dimension. I want to put a graphic of known size (no bigger than 30px by 30px) in a consistent location on top of the bottom graphic... in a corner of the bottom graphic would be nice, smack in the center would be OK.
Here's a tiny bit of my HTML as it exists without the overlay graphic:
<img class="thumbView" src="myscript.cgi?id=foo" />
border:1px solid #000000;
So you can see that inside its consistently sized parent div, the inconsistently sized graphic is horizontally centered, and vertically top-aligned.
I don't have ability on the back end to get image dimensions... this would be so much easier if I could!
Only needs to work in PC IE and Firefox.