Background image above border
===

I don't get it. I want a simple line with arrow so I use a class with border and a background-image:

    hr {
	padding-top: 10px;
	border: none;
	border-top:dotted #000 1px;
	background: #fff url("img/arrow.gif") no-repeat 100px -1px;
     }

Unfortunately the background is below the border...

See what I mean:
http://s7.directupload.net/images/120725/4ik4e7ic.png


I've tried z-index, "id beats class" (with `<hr id="arrow">`) but nothing worked. Is there a solution?


BTW, how the css-cracks would do such a dotted line with arrow?

Thanks for your input!


  [1]: http://i.stack.imgur.com/M9BjY.png