hr {
display : list-item;
list-style : url(hr.gif) inside;
filter : alpha(opacity=0);
width : 0;
}


Esse código deve ser lido apenas pelo internet explorer.
Mais detalhes em Image-Replacement Through CSS

Segue o código:

### no HTML:

inserir o elemento HR numa div com class=”hr”

### no CSS:
div.hr { height: 15px; background: #fff url(imagens/f_hr.gif) no-repeat scroll center;}
div.hr hr { display: none; }

Espero que aproveitem

Abraços.

Mas eu gostaria de saber como que a gente faz para alinhar a ao centro? Alguem poderia me responder?

Pq não se usa mais atributos dentro das tags, então como a gente faz pelo css?

sempre conheci o hr, mas, nunca me aprofundei sobre tal.
Particularmente eu acho que o hr poderia continuar nas especificações da w3c, mesmo para o xhtml 1.1 posterior. Digo isso pensando que, apesar de ser algo meramente “visual”, não tem sentido semântico.. é como outros elementos do html que servem para um código até mesmo organizado não acham… um “separador de conteúdo”..

Eu particularmente gosto de fazer algo meio estranho.. coloco hrs para seprar os conteúdos e coloco-o com display:none…
No querido “ctr + shift + s” (webdevelopper - firefox) fica bem organizado!

Enfim, eu gosto do hr - viva o/…