Style a
background image with CSS

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]

Mike

Michael Meisner brings a strong background in digital marketing, web analytics, writing, and web development to the table. He lives in Grass Valley, CA with his fiance, and their 9-year-old Pit Bull, Drifter. He works with eWinery Solutions as the Manager of Digital Marketing Services and helps wineries expand their consumer direct marketing efforts.

You may also like...

EmailEmail
PrintPrint
Attract more visitors

Get the latest blog updates, and email exclusive content that shows you how to:

  • Attract targeted visitors to your site
  • Engage those visitors in creative ways
  • Move visitors down the buying funnel
  • Find profitable niches to pursue

NOTE: I will NEVER spam you with cheesy promotions or share your information with anyone.