title: CSS - Positioning BG Image from Overlapping Text
body: <p>I want to position the 16x16 icons below differently.
  I want to auto-position them on the right of the text, and not behind the text.
  Also, I'd like to move the icons slightly up a few pixels too.</p>
  
  <p>This is the result of my code below:</p>
  
  <p><img src="https://i.stack.imgur.com/c2RXH.jpg" alt="bgimage position stafu"></p>
  
  <pre><code>&lt;span class="ico_person"&gt;John Smith&lt;/span&gt;
  &lt;span class="ico_phone"&gt;1-555-555-5555&lt;/span&gt;
  &lt;span class="ico_email"&gt;somewhere@someplace.com&lt;/span&gt;
  </code></pre>
  
  <p>Here's one the styles:</p>
  
  <pre><code>&lt;style&gt;
  .ico_person {
    color:#067CEA;
  cursor:pointer;
  font-weight:bold;
  background-color:#F6F6F6;
  
  background-image:url("/images/icons/icon_admins.png");
  background-repeat:no-repeat;
  background-position:1px 5px;
  padding: 3px;
  border-radius:3px 0 3px 3px;
  border: 1px solid #CCCCCC;
  
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>If the image is a background, am I able to position it exactly where I need it?
  Or does background-image stop that within certain boundaries?</p>