An image in the middle of an HR tag

Question

I need something similar to this hr tag

hr.style-eight {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

JSFiddle

But I need an image instead of the ASCII symbol. I've tried making the content "" and the background a background-image, but I'm having no luck.

`content:url(…)` – https://developer.mozilla.org/en/docs/Web/CSS/content — CBroe, Aug 14 '15 at 16:33
do you want it all in one `
` tag? because you could try `

` — MoralCode, Aug 14 '15 at 16:34
possible duplicate of [Custom
with image/character in the center](http://stackoverflow.com/questions/14202089/custom-hr-with-image-character-in-the-center) — blurfus, Aug 18 '15 at 23:05

score 4 · Accepted Answer · answered Aug 14 '15 at 16:36

4

Rather than

content: '';

Use the url(<url>) notation:

content: url(https://i.stack.imgur.com/yUzqW.png);

hr.style-eight {
  margin-top: 2em;
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}
hr.style-eight:after {
  content: url(https://i.stack.imgur.com/yUzqW.png);
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}

<hr class="style-eight" />

External JS Fiddle demo, for experimentation.

References:

content property (MDN).

answered Aug 14 '15 at 16:36

David Thomas

249,100
51
377
410

You are very correct. I had tried this, but my URL syntax was wrong (using ASP.NET MVC). Once I uploaded that image to imgur and used that URL just to test, I could see that my syntax was off. – adam3039 Aug 14 '15 at 17:12
1

In which case I'm glad to have been of help! :) – David Thomas Aug 14 '15 at 17:14
A note regarding this solution, well rather this entire solution, is that Internet Explorer does not support :after css on empty elements. This is causing my centered image to only show up in the other browsers. – adam3039 Aug 21 '15 at 04:22

score 2 · Answer 2 · answered Aug 14 '15 at 16:36

2

http://jsfiddle.net/gfweqd7y/1/

content: url(image.what ever);

answered Aug 14 '15 at 16:36

Mohamed Islam

712
6
11

An image in the middle of an HR tag

2 Answers2