Here's the guestion: do you remember seeing a technique that enables background images on an hr-element that also works on IE 6 and Opera? It's been quite a while since I've last had to look into this, so perhaps this is a problem that's been solved properly by now.

I've used a div instead of doing it properly to get around the background issue, as seen here and here — both link to the same site (a sauna society for those of you less fluent in Finnish). By the way, don't bother pointing out that I'm not even using horizontal rules in the markup… There are other issues dealing with layout at the moment as well.

If I'm not mistaken, just using a background-image doesn't work because IE and Opera still render a border around <hr />. I can't seem to come up with a better solution than just wrapping the element, like so: <div class="hr"><hr /></div>, and then doing a display:none on the hr. Better call it quits, then.

By the way, there are some valid comments posted on those articles that argue quite correctly that if you're styling an hr element, just sending the graphics won't do.

done some research for you: you will need

hr {
color:#fff;
border: 0 none #fff;
height:20px;
background: transparent url(box.gif) center top no-repeat;
}

where #fff is your background colour.

i think this should work. apparently you need the colour on both the border and the color.
Again i cannot test this yet, need to test at work.

good luck