CSS styling for HR

[arthurakay]

Is it possible to have more than one background image styled for an HR tag?

Currently, I have some code written like this (pseudo-code):

<div align="center">
  <img src="line.gif" style="height:1px; width:43%; vertical-align:middle;" />
  <img src="middle.gif" style="vertical-align:middle;" />
  <img src="line.gif" style="height:1px; width:43%; vertical-align:middle;" />
</div>

This displays three images pasted next to one another... the middle image is sandwhiched between two horizontal lines (gif images) which extend/contract based on the window size.

Is it possible to style this to do the same thing using an HR tag? This would be easier than doing an SSI INCLUDE call for this snippet of code.

[Paul O'B]

Hi,

In css presently you can only have one background image per element (although css3 has proposals for more).

I wouldn't use an hr anyway because it is one of those elements that can't be styled within any degree of accuracy cross-browser.

If the image is a simple divider then I would make one long image and then centre in in the bottom of the container.

Something like this:

http://www.pmob.co.uk/temp/starrow.htm

The image is wide enough for all monitors and still only about 2k.