Scalable Background Image w/ Textual Tool Tip [Archive]

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

Strangeplant

04-19-2006, 07:47 PM

Hi, I'm using jscheuer1's code from a previous thread:
http://www.dynamicdrive.com/forums/showthread.php?t=8515&highlight=background+image
in conjunction with DD Textual Tool Tip II located at:
http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

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.

Strangeplant

04-19-2006, 07:57 PM

I forgot to add the test site: http://earth.engr.ccny.cuny.edu/noaa/wc/Development/EarthBG.html

jscheuer1

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');
}

to:

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

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 {
position:absolute;
z-index:1;
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.