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”] { height: 15px; background: url(images/hr.png) no-repeat scroll center;} hr { display: none;}

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”]



Michael Meisner is a code-slinging, data crunching, growth hacking extraordinaire. He combines these powers to create traffic generation strategies and drive brand awareness for clients he works with. When he's not staring at a computer screen he can be found sipping a glass of wine with his Pit Bull and wife by his side.

You may also like...

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.