[SOLVED] Stretching Banner.

[Letterbomb05]

Hi,

 

I'm trying to find a decent way of creating a banner that will stretch, for compatibility with different screen resolutions. I have come up with the following HTML, however it doesn't work in IE, the middle repeating image tries to repeat on the y-axis aswell as x-axis, and therefore looks pretty bad. You can pretty much see what I'm trying to do from the source.

 

<table style="width:100%;padding:0;border-collapse:collapse;margin:0;text-align:left;">
<tr>
	<td style="width:18px;height:170px;background:url('graphics/head_left.png') no-repeat;padding:0;border-collapse:collapse;margin:0;"></td>
	<td style="height:170px;background:url('graphics/head_center.png');"> </td>
	<td style="height:170px;width:13px;background:url('graphics/head_right.png') no-repeat;"></td>
</tr>
</table>

 

If anyone has any ideas on how to fix this, or has a much better method, please share!

 

Thanks.

[rhodesa]

add a 'repeat-x' to the background CSS attribute for the middle one:

<table style="width:100%;padding:0;border-collapse:collapse;margin:0;text-align:left;">
   <tr>
      <td style="width:18px;height:170px;background:url('graphics/head_left.png') no-repeat;padding:0;border-collapse:collapse;margin:0;"></td>
      <td style="height:170px;background:url('graphics/head_center.png') repeat-x;"> </td>
      <td style="height:170px;width:13px;background:url('graphics/head_right.png') no-repeat;"></td>
   </tr>
</table>

 

but you really should get rid of those ugly tables and inline css...example coming in a sec...

[Letterbomb05]

inline CSS was temporary, yeah tables was only method I had >_<

[rhodesa]

<style type="text/css">
#banner {
  height: 170px;
  background: url('graphics/head_center.png') repeat-x;
}
#bannerLeft {
  float: left;
  background: url('graphics/head_left.png') no-repeat;
  width: 18px;
  height: 170px;
}
#bannerRight {
  float: left;
  background: url('graphics/head_right.png') no-repeat;
  width: 18px;
  height: 170px;
}
</style>
<div id="banner">
  <div id="bannerLeft"></div>
  <div id="bannerRight"></div>
</div>

[Letterbomb05]

Thanks alot, makes sense now I read it

[rhodesa]

oops...that bannerRight should be a float: right;