CSS <HR> With Ornament

Question

I struggled with something that in theory should be very simple for several days ... and I decided not to give up.

I am trying to achieve this:

Essentially a horizontal rule with an ornament in between - HR will cover the entire width of the screen.

So, I cut my PSD to cross out the ornament as an image - and I'm trying to overlay it on

---

centered but unsuccessful.

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 can't figure out how to make an image in the HR center. Any help or pointers would be appreciated.

Answer 1

Change tp markup

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

Add the following to the stylesheet, replacing 16px with a suitable value, which depends on the height of the image and the expected font size.

 .hr { text-align: center; } .hr img { position: relative; top: -16px; } 

However, it is best to use only an image centered inside a div element that has a suitable background image that repeats horizontally. The background image will be the part that has the same color as the overall background of the page, but has a horizontal line in the middle.

Answer 2

You can also accomplish this using CSS pseudo-element. All that is needed for HTML is <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 */ } 

Answer 3

Check this script . You can set the image of an ornament as a background on a div using the ornament class.

Answer 4

with cuff ... using center image for hr and repeating line segment for div ...

  <style> .line hr {height: 16px; background: url(as_image.jpg) center center no-repeat;border:0;} .line {background: url(as_line.jpg) center repeat-x;} </style> <div class="line"><hr></div>