.png image not showing in chrome
11,074
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
Author by
charliesd
Updated on June 18, 2022Comments
-
charliesd about 2 years
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>