Style HR with Image

Question

I am trying to achieve something as close to the image below as possible.

I currently get the following with the code below and can't seem to quite get it to do what I need.

Current Styling:

My CSS:

hr:after { 
    background: url('../img/green_leaf.png') no-repeat top center;
    content: "";
    display: block;
    height: 18px; /* height of the ornament */
    position: relative;
    top: -9px; /* half the height of the ornament */
    border: 0;
    color: #d7d7d7;
}

I Would like to thicken the line, and if possible, add space around the image (without making the green_leaf.png have a white bg).

possible dupe of http://stackoverflow.com/questions/35176262/how-to-make-space-between-middle-line-and-text/ — Aziz, Feb 24 '16 at 18:39

score 18 · Accepted Answer · answered Feb 24 '16 at 18:58

How about setting the image in the hr element, and using :before and :after to create the lines? That way you won't have to set a background on the image to cover up a single line.

Working Example:

hr { 
    background: url('https://i.stack.imgur.com/37Aip.png') no-repeat top center;
    background-size: contain;
    display: block;
    height: 18px;
    border: 0;
    position: relative;
}
hr:before,
hr:after {
    content: '';
    display: block;
    position: absolute;
    background: #d7d7d7;
    height: 2px;
    top: 8px;
}
hr:before {
    left: 0;
    right: 50%;
    margin-right: 10px;
}
hr:after {
    right: 0;
    left: 50%;
    margin-left: 10px;
}

<hr />

Exactly what I was looking for! I wanted to avoid adding extra DIV's and keep the ability to simply use the HR tag, this works EXACTLY as needed! Thanks a TON! — Meta, Feb 24 '16 at 19:11

score 0 · Answer 2 · edited May 23 '17 at 12:34

You can find the answer in this post Custom <hr> with image/character in the center

I modified it and I got this:

hr {
  no-repeat top center;
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #676767;
}

hr:after {
  content: ""; /* section sign */
  background: url('smiley.gif') no-repeat top center;
  display: inline; /* for vertical centering and background knockout */
  background-color: white; /* same as background color */
  padding: 0 2em; /* size of background color knockout */
}

Pay attention to padding: 0 2em; and background-color: white;.

score 0 · Answer 3 · answered Feb 24 '16 at 19:04

If you set it up like this, and specify background color on the image to match whatever you have in the background of the page (probably white) it will look good:

HTML

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

CSS

hr {
    border:none;
    border: 1px solid #d7d7d7;
}

.hr { 
    text-align: center;
}

.hr img {
    position: relative;
    top: -18px;
    background:white;
    padding:0 5px;
}

Result:

Fiddle

Style HR with Image

3 Answers3

Working Example: