I'm facing an issue with the background image not appearing for one of the links in my navbar in Chrome. Specifically, the image doesn't show up between the "Athletics" and "Bowling" links.
Interestingly, the background image displays fine in Firefox and Explorer. I've tried various solutions like adjusting the background-size and image-rendering properties in CSS, but nothing seems to make it work in Chrome.
How can I ensure that all background images are correctly displayed across different browsers?
CSS
ul {
display: flex;
list-style: none;
}
ul a {
background: url(sports-div.png) right bottom no-repeat;
display: inline-block;
font-family: sans-serif;
font-size: 13px;
padding: 5px;
}
HTML
<ul>
<li><a href="#">Football</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Ice hockey</a></li>
<li><a href="#">Volleyball</a></li>
<li><a href="#">Badminton</a></li>
<li><a href="#">Snooker</a></li>
<li><a href="#">Athletics</a></li>
<li><a href="#">Bowling</a></li>
<li><a href="#">Cycling</a></li>
</ul>