# html/jpeg question...

**URL:** <https://boards.straightdope.com/t/html-jpeg-question/101958>\
**Category:** Factual Questions\
**Created:** [April 5, 2002, 7:22am UTC](https://boards.straightdope.com/t/html-jpeg-question/101958 "2002-04-05T07:22:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![black\_rabbit](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@black\_rabbit](https://boards.straightdope.com/u/black_rabbit)\
**Post date:** [April 5, 2002, 7:22am UTC](https://boards.straightdope.com/t/html-jpeg-question/101958/1 "2002-04-05T07:22:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![black\_rabbit](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@black\_rabbit](https://boards.straightdope.com/u/black_rabbit)\
**Post date:** [April 5, 2002, 7:34am UTC](https://boards.straightdope.com/t/html-jpeg-question/101958/2 "2002-04-05T07:34:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PaulYeah](https://avatars.discourse-cdn.com/v4/letter/p/e36b37/32.png) [@PaulYeah](https://boards.straightdope.com/u/PaulYeah)\
**Post date:** [April 5, 2002, 10:36am UTC](https://boards.straightdope.com/t/html-jpeg-question/101958/3 "2002-04-05T10:36:54Z")

</div>

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:

```auto

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

```auto

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

```auto

<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

---

<div class="post-metadata">

**Author:** ![jjimm](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@jjimm](https://boards.straightdope.com/u/jjimm)\
**Post date:** [April 5, 2002, 1:24pm UTC](https://boards.straightdope.com/t/html-jpeg-question/101958/4 "2002-04-05T13:24:48Z")

</div>

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.

> [@](#):
>
> \<DIV style=“position: absolute; top: 0px; left: 0px; z-index: -1;”\>\<IMG SRC=“reds/6.jpg”\>\</DIV\>  
> \<DIV style=“position: absolute; top: 0px; left: 0px; z-index: 1;”\>\<IMG SRC=“title.gif”\>\</DIV\>

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/](http://hotwired.lycos.com/webmonkey/) is a very good resource for this sort of thing.

---

<div class="post-metadata">

**Author:** ![sailor](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@sailor](https://boards.straightdope.com/u/sailor)\
**Post date:** [April 5, 2002, 2:11pm UTC](https://boards.straightdope.com/t/html-jpeg-question/101958/5 "2002-04-05T14:11:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![black\_rabbit](https://avatars.discourse-cdn.com/v4/letter/b/f19dbf/32.png) [@black\_rabbit](https://boards.straightdope.com/u/black_rabbit)\
**Post date:** [April 5, 2002, 6:31pm UTC](https://boards.straightdope.com/t/html-jpeg-question/101958/6 "2002-04-05T18:31:54Z")

</div>

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/1.jpg)  
[http://neussubjex.net/reds/2.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.
