title: .png image not showing in chrome
body: <p>I have just added a couple of social media icons to my website. They display fine in safari and firefox but not in chrome.</p>
  
  <p><strong>I found a possible answer might be to do with the way the png file has been saved. Does anyone know why or how this would affect whether chrome is able to display the image? or is it something in my code?</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section #contact .icon {
    height: 50px;
    width: 50px;
    float: center;
    padding: auto;
    margin: 10% auto;
  }
  section #contact #instagram {
    background-image: url(images/instagram.png);
    background-size: contain;
    display: block;
    float: center;
    width: 100%;
    height: 100%;
  }
  section #contact #instagram:hover {
    background-image: url(images/instagram-grey.png);
  }
  section #contact #facebook {
    background-image: url(images/facebook.png);
    background-size: contain;
    display: block;
    float: center;
    width: 100%;
    height: 100%;
  }
  section #contact #facebook:hover {
    background-image: url(images/facebook-grey.png);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="content" id="contact"&gt;
  
    &lt;a class="anchortag" name="Contact"&gt;&lt;/a&gt;
    &lt;h3&gt;Contact&lt;/h3&gt;
    &lt;!-- email --&gt;
    &lt;p&gt;&lt;a href="mailto:emailaddress" aria-haspopup="true"&gt;email&lt;/a&gt;
    &lt;/p&gt;
    &lt;!-- Facebook --&gt;
    &lt;div class="icon"&gt;
      &lt;a id="facebook" title="facebook" href="https://www.facebook.com/" aria-haspopup="true" target="_blank"&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- Instagram --&gt;
    &lt;div class="icon"&gt;
      &lt;a id="instagram" title="instagram" href="https://www.instagram.com/" aria-haspopup="true" target="_blank"&gt;&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>