View Full Version : Scalable Background Image w/ Textual Tool Tip

04-19-2006, 07:47 PM
Hi, I'm using jscheuer1's code from a previous thread:
in conjunction with DD Textual Tool Tip II located at:

I'm still working on the same "simple" page where I tried the fader discussed in a previous thread: (http://www.dynamicdrive.com/forums/showthread.php?t=9025), this time making it simpler, and I'm having trouble - again. The background shows in Firefox, Opera and Netscape but not in MSIE and Advanced. It will show in MSIE if I move the line:

<img class="backgroundcontent" src="earth_terminator.jpg" alt="background test image">

but then the text disappears. My take is that this part doesn't work in my page, but works in jscheurer1's demo (demo found at http://home.comcast.net/~ansiguy/alpha_image_test_2.htm) and I don't know why:

html { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='earth_terminator.jpg', sizingMethod='scale');

Also, I cannot control the position of the text on the page; it is not possible to move the text up farther to make it look right on smaller windows. (I don't know what's up.) jscheuer, could you please help? Thanks in advance.

04-19-2006, 07:57 PM
I forgot to add the test site: http://earth.engr.ccny.cuny.edu/noaa/wc/Development/EarthBG.html

04-25-2006, 08:11 AM
I'm not sure why yet but, it must have something to do with DOCTYPE switching, also with the peculiarities of the HTML element. Anyways, if you change your DOCTYPE to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

and the style:

html { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='earth_terminator.jpg', sizingMethod='scale');


body {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://earth.engr.ccny.cuny.edu/noaa/wc/Development/earth_terminator.jpg', sizingMethod='scale');

That will take care of the major problem. The minor problem of the positioning of the text is ordinary layout. I chose for my demo:

.forgroundcontent {
margin:100px 10% 0 10%; /*design preference*/

As commented, that line is design preference. You can use the traditional 20px or experiment with a (small) percentage, 8% seemed good. But, no matter how you work it, the content for 'NOAA-CREST' is too tall all by itself for 800x600, except in full-screen chromeless (F11) mode. If it is critical, you might want to detect the window.innerHeight/document.documentElement.clientHeight and adjust the top margin of the forgroundcontent class accordingly using script.