Style HR with Image - css

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).

Answer 1

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('http://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 />

Answer 2

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;.

Answer 3

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