html/jpeg question...

Am I going crazy?

Is there some reason why progessively encoded JPEG images will load like standard images when set as the background of a table cell?

Take a look at this:

http://neussubjex.net/test.php

Concentrate on the images of various Chinese Communists behind the title image. They’re progressively encoded JPEGS set to load randomly via php as background images to that particular table cell.

In Opera, NS4, and IE5, they’re loading like they’re standard encoded.

Any way I get around this?

Danke.

I meant to add that you should reload the page several times… there are eight different background images in there, and if you watch them load, you’ll see that they’re not tiling like a good progressive jped should.

I think it’s possible with stylesheets. You can place both the background image and the foreground logo itself within the table cell, which should fix the progressive rendering problem, and tell the browser to display the foreground on top of the background image using the position: relative attribute in the class definition in the stylesheet. Z-ordering lets the browser know to display the foreground image on top of the background. Here’s the code I added to the stylesheet:



.title {
	position: relative; left: -315; z-index: 3
}
.bgimage {
	z-index: 2
}


I also changed the table cell containing the image to this (notice the class attributes I added to the image tags):



	<td align="right" valign="top">
		<img src="reds/4.jpg" class="bgimage">
		<!--img src="pix.gif" width="90" height="200"-->
		<img src="title.gif" class="title">
	</td>


Unfortunately, this seems to have broken some other features on the page. I will leave that to the HTML experts on the board. Here’s the full page as I’ve modified it:



<html>
<head><title>neussubjex.net</title>

<style type="text/css">
<!--
P, TD, TH, text, select, option, textarea, div { 
	font-family : verdana, arial, sans-serif;
	font-size : 11px;
}
A:LINK {
	text-decoration : none;
}
A:ACTIVE {
	text-decoration : none;
}
A:VISITED {
	text-decoration : none;
}
a:hover {
text-decoration: underline;
}
.title {
	position: relative; left: -315; z-index: 3
}
.bgimage {
	z-index: 2
}
.bgvertical {
	background-image: /dv.gif;
	repeat-y; 
	width=4;
}
.bghorizontal {
	background-image: url(dh.gif);
	repeat-x;
	width=1;
}
-->
</style>
</head>
<base href="http://neussubjex.net/">
<body bgcolor="000000" text="FFFFFF" link="FFFFFF" vlink="FFFFFF" alink="DDDDDD" marginwidth=0 marginheight=0 topmargin=0 leftmargin=0 footmargin=0>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
	<td align="right" valign="top">
		<img src="reds/4.jpg" class="bgimage">
		<!--img src="pix.gif" width="90" height="200"-->
		<img src="title.gif" class="title">
	</td>
	<td rowspan=3 class="bgvertical">
		<!--img src="pix.gif"--> 
	</td>
</tr>
<tr><td background="dv.gif"><img src="pix.gif"></td></tr>
<tr><td>
	<table border=0 cellpadding=4 cellspacing=0>
	<tr><td align="right" align="top">
	<b><a href="contact/">contact info</a></b>
	<p><b><a href="http://bored.neussubjex.net">message bored</bored></b>
	<p><a href="zero/zero.html"><b>zero worship</a></b>
	<p><a href="links/index.php"><b>links</a></b>
	<p><a href="faq/index.html"><b>faq</a></b>
	<p>"<a href="http://blah.com">I like big butts and I cannot lie. All you other brothas can't deny.</a>"<p><b>--Joe Mama</b>	</td></tr></table>
</td></tr></table>

</body>
</html>


I haven’t completely solved the problem, but I hope this help.

PaulYeah

Am I correct in thinking the problem is that the browser waits until the Commie image is totally loaded in before displaying, rather than coming in parallel lines? In this case, instead of using the HTML background feature, why not use two DIVs with differing z-indices but the same absolute positioning. E.g.

Oh, I previewed and see that PaulYeah has suggested something similar and better (DIVs don’t work properly in Netscape anyway). http://hotwired.lycos.com/webmonkey/ is a very good resource for this sort of thing.

I am not sure what the problem is but what you have ais a JPG in the background and a title.GIF with transparent background superimposed over it. To me the whole thing is acting normal. Where’s the problem?

Thanks guys… gave the CSS route a shot, and it’s still loading like standard encoding.

Maybe the fact that they’re all less than 30k has something to do with it… anybody have any idea how much information is supposed to load on the first pass? That doesn’t make sense though… when you look at the images directly:

http://neussubjex.net/reds/1.jpg
http://neussubjex.net/reds/2.jpg
etc.

They load progressively.

I suppose I could try IFRAME and ILAYER to see if they work. Or I could just compress them more to make them them load faster.

Thanks for going to all the trouble.

sailor:

When you save JPEGs in most decent image editors, you usually have the option to make encode them as “standard” or “progressive.” The browsers will load the standard image line by line, while it should load the progressive images in several passes of increasingly better resolution. First, you see an ill-defined mosaic, then the image gradually begins to take shape as it loads.

For some reason, my progressively encoded images are loading like standard when they’re used as a background. Not really a big deal, but I’m an obsessive-compulsive hand coder. Maybe I should just let it go.