** This is a short sample of my code. There are a bunch of buttons with icons, all using the "alt" tag. I validated all code using the NU HTML Checker and it indicated "no issues or warnings". Then when I opened it in Firefox, the alt text was overprinting all the images, which are sprites. Pretty sure it has to do with the "background", but is there not a way to overcome this? The issue never showed up until I opened in Firefox, so I also tried Chrome...same result.**
#mintscandies {
width: 170px;
height: 160px;
background: url(https://www.texasbranderspromotional.com/files/color-home-page-sprites-07022022.jpg) -20px -20px;
margin-left: auto;
margin-right: auto;
}<html>
<head>
</head>
<body>
<div class="dropdown">
<div id="mintscandies">
<img src="https://www.sagemember.com/we/we.dll/img_trans.gif" alt="custom branded mint candies" width="1" height="1">
</div>
<button class="dropbtn">MINT CANDIES</button>
<div class="dropdown-content">
<a href="https://www.texasbranderspromotional.com/breath-mints.htm">Popular Breath Mints</a>
<a href="https://www.texasbranderspromotional.com/breath-mints-wrapped.htm">Full Color Wrapper Mints</a>
</div>
</div>
</body>
</html>