CSS <HR> With Ornament

Question

I have been struggling with something which in theory should be very simple for a few days now... and i am determined not to give up.

I am trying to achieve this:

Essentially horizontal rule, with an ornament between - the HR will span the full width of the screen.

So i sliced my PSD to drop out the ornament as a image - and i am trying to overlay this onto a

---

centered but failing miserably.

My Markup:

<div>
  <hr>
  <img src='assets/img/ornament.png' class='center'>
</div>

CSS:

hr{

height: 2px;
color: #578daf;
background-color: #578daf;
border:0;

}

I just cant figure out how to make the image appear in the centre of the HR.... Any help or pointers would be appreciated.

Answer 1

You can also accomplish this with a CSS pseudo element. All that's needed for HTML is the <hr>

hr:after { 
    background: url('yourimagehere.png') no-repeat top center;
    content: "";
    display: block;
    height: 30px; /* height of the ornament */
    position: relative;
    top: -15px; /* half the height of the ornament */
}