title: css background image positioning (negative position?)
body: <p>I'm trying to add an icon which sits on top of the border, splitting it in half.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {
              background-color:#26140C;
          }
  
          .box {
              width: 800px;
              margin: 0 auto;
              margin-top: 40px;
              padding: 10px;
              border: 3px solid #A5927C;
  
              background-color: #3D2216;
              background-image: url(Contents/img/icon_neutral.png);
              background-repeat: no-repeat;
              background-position:10px -20px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="box"&gt;
          &lt;h1&gt;This is a test!&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Instead of image being over the border like I was hoping, its under it.</p>