How to extract a specific text from an image?

HTML - How to superimpose text over 100%-width background image?

• Greetings. I'm webmaster for a Boy Scout Troop website. I'm fairly competent at writing Perl CGI back-end stuff, but I'm not so knowledgeable when it comes the tricks and techniques to make a website "pretty" and there's something I'd like to do but don't know how... If you visit my site at http://www.troop606.com you will see that I'm using frames to position a static banner across the top. The topmost frame contains (only) an image. I use fixed height but 100% width so that the image will span any size browser window. The second frame contains (only) our Unit Name, "Troop 606, Portland, Oregon" as ordinary text (ie, not an image). I would prefer to superimpose that text in the lower lefthand corner of my image, and get rid of the second frame that's dedicated to holding the text. But I'm not sure how to do that. I tried making the image a background, but I couldn't make it scale. If I make the text an actual part of the image, it looks funny when it scales (the text grows and shrinks). Since this is my page's main banner, I don't want to get too "modern" - it should render even on fairly old browsers, and CERTINALLY not be specific to any particular browser. So the requirements are: 1. Superimpose the text in the lower LH corner of the image 2. The image scales across the browser window, but the text is a fixed size and position (even if the window is resized). 3. The banner should render on browsers back to: IE 5.x, NS 4.7x, Mozilla (including Phoenix/Firebird) 1.1, Opera 7.x, Konqueror 3.x, Galeon. The answer should consist of the necessary HTML code to paste into my homepage. The answer can include style-sheet or javascript stuff provided it meets the browser requirement. It may not be possible to meet the third criteria. If not, I would accept an answer that includes "browser detection" and serves the new content to newer browsers but falls back to my current scheme for older browsers. Since that answer would be more involved, it would earn a 50% bonus. My current code is readily available by viewing the page and frame source on the website, so I won't bother to paste it here. Thanks!!!!!

• Answer:

  Thanks for asking! I have done a bit of image stretching, widening the image to approximately 1,000 pixels from the original 750. I then increased the canvas width and popped in a duplicate copy of the image, flipped horizontally, and matched edges. The background image is now 2,000 pixels wide, which should accommodate even the largest monitor sizes. I've placed the image as a background in a simple 1 cell X 1 cell table, in the tablecell background only, to avoid the background peculiarities of older versions of 'Zilla and NS. Most visitors will never see the full width. The modified code is in a file named banner.html, at: http://64.127.138.113/i1/banner.html You may compare this to your own banner.html at: http://12.224.133.122/banner.html The code may be snatched by viewing the source, and you may save the image by right clicking and selecting "Save Background As" in IE, or collecting a copy direct from the image location at: http://64.127.138.113/i1/mthood2.jpg You will be able to eliminate the middle "text only" frame from your Frameset document. The code does not validate under some interpretations of HTML standards, but instead is a developer's "quick and dirty" fix that should provide backward and [reasonably] forward compatibility. Hopefully, this method will provide a satisfying solution. If not, I'll be happy to see if I can come up with a CSS or javascript alternative. If you have any questions about the code or image, please, feel free to ask. --larre