Replace <hr> line by image

Question

I want to have a custom <hr> such that, instead of rendering a plain line, it repeats an image to create a line.

This is the code I currently use

hr {
    border: 0;
    background: url(hr.png) repeat-x;
}

Can anyone help me? Thanks!

Answer 1

You need to specify a height:

Example

hr{
    border:0;
    height:20px;
    background:url(http://placehold.it/20);
}