Пытаюсь быстро сверстать, но тут столкнулся с проблемой: обрезается часть пластинки. Просто не догоняю почему. Помогите пж.
body {
background-color: grey;
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
cursor: pointer;
}
.vinylwheel {
width: 100%;
height: 100%;
background: no-repeat url("http://www.stickpng.com/assets/images/5856b3da4f6ae202fedf2794.png");
background-size: 100% auto;
margin: auto;
}
.mid {
border-radius: 50%;
width: 32%;
background: no-repeat url("https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/");
background-size: 100% auto;
background-position: center;
margin: auto;
transform: translateY(97%);
text-align: center;
}
.btm {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
#play {
width: auto;
appearance: none;
-webkit-appearance: none;
background: transparent;
color: white;
border: 0;
text-align: center;
display: inline;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<div class="btn">
<center>
<button id="play">adf</button>
</center>
</div>
<div class="vinylwheel">
<div class="mid">
<img src="https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/" alt="mid" style=" width: 100%; opacity: 0; visibility: hidden; z-index: -1;" />
</div>
</div>