When we think of the horizontal rule, other cliche 90’s era design items come to mind; however the <hr> has made quite a comeback lately. A recent post at Smashing Magazine shows some fresh and creative uses for the once forgotten HTML tag.
Now that you have it in mind that you want to use a slick background image instead of that boring old straight line, the question arises – how do I code that effectively? At first you’d think, “I’ll just add a background image to the basic HTML hr tag,” but as you may have guessed, browsers display output differently when you do this.
For a simple solution, use the following CSS to style your <hr>line:
[sourcecode language=”css”]
div.hr { height: 15px; background: url(images/hr.png) no-repeat scroll center;}
div.hr hr { display: none;}
[/sourcecode]
That effectively hides the <hr> tag from displaying anything funny, and allows you full control over the background image.
To use it in your HTML, use the following:
[sourcecode language=”css”]
[/sourcecode]
