Im trying to make a few buttons.
I have a background image on a div, parts of this images are transparent. The background image is a circle.
When the user hovers over that div it changes the background to purple showing through the transparent parts.
The div is 80px x 80px. Same with the background image.
The radius of the div is 100px;
When the user hovers over the div, there is a small part of the purple showing outside the background image.
How do I stop this from happening?
<div onclick="gotoPage('HomePage')" class='MenuItem' id='home'>
<div onclick="gotoPage('AboutUsPage')" class='MenuItem' id='team'>
font-family: 'Share Tech', bold, sans-serif;
color: rgb(51, 0, 102);
background-color: rgba(51, 0, 102, 1);
Assuming every thing is as you say, I would only suggest that you add this to ensure the bg image is sized and located correctly:
background-position:center; background-size:80px 80px;
border-radius should be amended to: