.png image not showing in chrome

Question

I have just added a couple of social media icons to my website. They display fine in safari and firefox but not in chrome.

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?

 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); }

 <section class="content" id="contact"> <a class="anchortag" name="Contact"></a> <h3>Contact</h3> <!-- email --> <p><a href="mailto:emailaddress" aria-haspopup="true">email</a> </p> <!-- Facebook --> <div class="icon"> <a id="facebook" title="facebook" href="https://www.facebook.com/" aria-haspopup="true" target="_blank"></a> </div> <!-- Instagram --> <div class="icon"> <a id="instagram" title="instagram" href="https://www.instagram.com/" aria-haspopup="true" target="_blank"></a> </div> </section>

Answer 1

Try clearing your browser cache.

Browsers will store parts of websites in memory, or cache, so it can load faster for you the next time you view it.

In Chrome,

• Click on the More button (upper right hand corner)
• Select Settings
• Search for cache
• Select clear browsing data...
• Check images and files
• Press the Clear browsing data button
• Refresh your website

Answer 2

use css like this :

       .icon {
            height: 50px;
            width: 50px;
            float: center;
            padding: auto;
            margin: 10% auto;
        }

        #instagram {
            background-image: url(https://dummyimage.com/50/000000/fff);
            background-size: contain;
            display: block;
            float: center;
            width: 100%;
            height: 100%;
        }

        #instagram:hover {
            background-image: url(https://dummyimage.com/50/000000/fff);
        }

        #facebook {
            background-image: url(https://dummyimage.com/50/000000/fff);
            background-size: contain;
            display: block;
            float: center;
            width: 100%;
            height: 100%;
        }

        #facebook:hover {
            background-image: url(https://dummyimage.com/50/000000/fff);
        }

IDs in css are meant to be unique so, you don't have to call them from their parents, instead of

section #contact #instagram

just use

#instagram