<style>
.bottommenu {
position:fixed;
bottom:0px;
border-top:1px solid -sharpb0b0b0;
padding-top:3.5%;
background:white;
width:100%;
height:65px;
}
.menubutton {
position:relative;
width:20%;
height:90%;
float:left;
}
.buttonimg {
position:relative;
background-color:rgb(176,176,176);
width:50%;
height:100%;
margin: 0 auto;
background-size:cover;
}
.bottommenu .menubutton .buttonimg:hover {
background-color:pink;
}
.subbuttons {
visibility:hidden;
transition:all.3s;
left:-150%;
width:300%;
opacity:0;
height:300%;
position:relative;top:-330%;
}
</style>
<div style="width:414px;">
<div class="bottommenu">
<div class="menubutton">
<div class="buttonimg" style="backgroundimage:url(/wpcontent/uploads/2018/04/bnk.png);">
</div>
</div>
<div class="menubutton">
<div class="buttonimg" style="background-image:url(/wp-content/uploads/2018/04/classify.png);">
</div>
</div>
<div class="menubutton">
<div class="buttonimg" style="background-image:url(/wp- content/uploads/2018/04/wish.png);">
</div>
</div>
<div class="menubutton">
<div class="buttonimg" style="background-image:url(/wp-content/uploads/2018/04/cart.png);">
</div>
</div>
</div>
</div>
when the parent element is not fixed-positioned, the background-size:cover, can cover the entire child element, but the pores appear after positioning. Why is that?