I have another question, this other code was with the generator,
Am I supposed to add, or should I add any of the below code to my code?
display: inline-block;
no-repeat;
overflow: hidden;
text-indent: -9999px;
text-align: left;
.img-260x260, .img-652652652656
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
.img-260x260 { background-position: -0px -0px; width: 260px; height: 260px; }
.img-652652652656 { background-position: -0px -260px; width: 260px; height: 260px; }
This shows nothing:
This shows:
display: inline-block;
This shows:
background-repeat: no-repeat;
https://css-tricks.com/css-sprites/
Do you think I should add any of them to these codes?
https://jsfiddle.net/mntrmfsb/456/
.playButtonb {
position: relative;
width: 260px;
height: 260px;
cursor: pointer;
background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/gY2nkOT.png");
border: 3px solid #0059dd;
background-position: 0 -260px;
width: 260px;
height: 260px;
}
.playButtonb.active {
border: 3px solid #e77d19;
background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/gY2nkOT.png");
background-position: 0 0;
width: 260px;
height: 260px;
}