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/s...ckground+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/s...ad.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

rogid

XImageTransform.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...t/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:

HTML Code:

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

and the style:

Code:

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

to:

Code:

	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:

Code:

	.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.

Thread: Scalable Background Image w/ Textual Tool Tip

Thread Tools

Search Thread

Scalable Background Image w/ Textual Tool Tip

Bookmarks

Bookmarks

Posting Permissions