title: How to center image using CSS without white border
body: <p>Here is my CSS and HTML code. I want to put a single image in the center and this works except there is a weird white border around the image. I have tried <code>border:none;</code> and <code>border:0;</code></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Food.&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;link rel="icon" type="image/png" href="favicon.ico"&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;img border="0" id="image" class="centered" /&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -182px;
    margin-left: -153px;
  
  }
  
  img#image{
     /*I think this is where the issue is caused*/
      width:337px;
      height:219px;
      background-image: url('soon_comp.png');
      background-color: transparent;
  }
  
  
  body {
      outline: none;
      background-color: rgb(15,15,30);
      border-color:transparent;
      border:0px;
  }
  </code></pre>