title: Style HR with Image
body: <p>I am trying to achieve something as close to the image below as possible.
  <a href="https://i.stack.imgur.com/vqWa0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vqWa0.png" alt="enter image description here"></a></p>
  
  <p>I currently get the following with the code below and can't seem to quite get it to do what I need.</p>
  
  <p>Current Styling:
  <a href="https://i.stack.imgur.com/Ob1DA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ob1DA.png" alt="enter image description here"></a></p>
  
  <p>My CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>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).</p>