Best method for variable-width background graphic?

[encyclo]

I'm just cleaning up a tables-based site, removing the presentational HTML, nested tables etc. In the design there is a horizontal graphic composed of three parts - a left and right "end" graphic, with a variable-width center section which expands to fill the available width of the block.

The current markup is this:

HTML:

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="/tg2.gif" width="52" height="30" alt=""></td>
<td class="indextable">&nbsp;</td>
<td><img src="/tr2.gif" width="52" height="30" alt=""></td>
</tr>
</table>

CSS:

.indextable {
background:url(images/tm2.gif) repeat-x;
width:100%;
}

These graphics are entirely presentational with no semantic value. So, rather than the table, which way would you mark up this graphic element?

[sifredi]

It sounds like you should consider a sliding doors technique, depending on how your images look. The very basic principle is to have two background images that slides into each other and creates a "doorway".

In your example, make a new 10000px wide and 30px high image filled with the tm2.gif image. Then add the tg2.gif in the corners. Then try something like:

CSS:

.div1 { width: 100%; height: 30px; background: url(/images/wide.gif) no-repeat right; }
.div2 { width: 52px; height: 30px; background: url(/images/wide.gif) no-repeat;}

HTML:

<div class="div1"><div class="div2"></div></div>

[Xapti]

You don't need width:100% on a div, that's their default unless floated/positioned.
And I think div2 was supposed to have a different image, right?

Anyways... did the whole thing need to have any content over top of it? (like one continuious block of text) or does it just need to be in the middle, or no content at all?

Because all you really need to do to mimic this if you want just content in the middle part (or not at all), then do the following:
HTML:
<div class="d">
<img src="left_end.img" class="a"/>
stuff, if there's any in here
<img src="right_end.img" class="b"/>
</div>
CSS:
.d{background-image:url(repeat.img);background-repeat:repeat-x;height:30px}
.a{float:left}
.b{float:right}

Of course in your case right end and left end are the same image. I'm also assuming they are sized properly, and don't need their sizes given.

[sifredi]

You don't need width:100% on a div, that's their default unless floated/positioned.

true, just trying to make a point.

And I think div2 was supposed to have a different image, right?

Nope. If you put the "edges" on each side of a wide image, you only need one image. The first image positions right so the right edge shows. The second one positions left with a limited width on top of the other image, creating the "sliding door" (watch out for transparent gif's)

<div class="d">
<img src="left_end.img" class="a"/>
stuff, if there's any in here
<img src="right_end.img" class="b"/>
</div>

I wouldn't add presentational images in the HTML source, unless they have semantic meaning (like a logo). But that's just me. There are plenty of CSS solutions out there.

[encyclo]

Thanks for the suggestions. :) The images are presentational, but form a break between sections (so there is no content placed over them). I think as sifredi says, I don't want to keep the images in the source, although a

<hr>

could possibly be representative of the semantics. I wonder if I can put one in as a fallback...

I like the sliding doors idea in this instance, as it is probably the least disruptive. Or can I cheat and use the three existing graphics (the center one being a 6px wide repeating image)?

[sifredi]

can I cheat and use the three existing graphics

sure you can. just create a new 10000px wide image and repeat the 6px image in there. Then just add whatever "edges" to it on each side (they could be different). It shouldn't become to heavy anyway if you use .gif.

You could probably style a hr inside a span to create the same effect:

<span class="break"><hr /></span>

. I'm not sure about browser defaults when it comes to styling the <hr/> though, but you could most probably display it as a block with a certain height and background etc. Worth testing!

[Xapti]

You're not supposed to put block elements inside inline elements, as in your example, just use a div.

And if you don't want images put there, you could do the same thing with a div with a background image, just it will then be more code because you'll need to specify width, height, and have closing tag for the div. Not a big deal, but it's still more. Nothing something I'd likely bother with considering the improvement it gives.