SighFye SighFye - 1 month ago 6
CSS Question

Color of div hangs over the background image on hover over


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 id='Menu'>
<div onclick="gotoPage('HomePage')" class='MenuItem' id='home'>
<div onclick="gotoPage('AboutUsPage')" class='MenuItem' id='team'>
About Us

CSS Code

width: 80px;
font-family: 'Share Tech', bold, sans-serif;
background-image: url(../images/button.png);
color: rgb(51, 0, 102);
text-align: center;
vertical-align: center;
margin-top: 25px;
border-radius: 999px;
width: 80px;
height: 80px;
line-height: 80px;
background-color: rgba(51, 0, 102, 1);
color: darkgray;
cursor: pointer;
/**position: relative;
top: -5px;
left: -5px;
margin-bottom: -20px;**/

Example Page


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-size:80px 80px;

Also, the border-radius should be amended to:

border-radius: 50%;

JSFiddle Demo