CODEWITHSUNDEEP
css
adam3039
adam3039

Reputation: 1201

An image in the middle of an HR tag

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.

Upvotes: 0

Views: 3252

Answers (2)

Mohamed Islam
Mohamed Islam

Reputation: 752

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

content: url(image.what ever);

Upvotes: 2

David Thomas
David Thomas

Reputation: 253348

Rather than

content: '';

Use the url(<url>) notation:

content: url(https://i.sstatic.net/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.sstatic.net/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:

Upvotes: 4

Related Questions