How do I add an overlay image ONLY to my main div?

I've been working on adding some pizzazz to my profile with some glitch effect gifs, and I want to add this pink glitch gif to my main profile, but it instead fills the whole page, no matter what I do. :< I'll show my code below, can someone please tell me what I'm doing wrong? (I don't want to get rid of the gradient I already made, and I need to make sure that the opacity of the glitch is adjusted.)

main{
width: 90%;
max-width: 1600px;
background-color: #000000;
background-image: linear-gradient( #000000, #ff0aa1);
color: #ffffff;
border-radius: 10px;
A:hover { color: #ff0aa1; }


}


main:after {
background-image: url('https://i.pinimg.com/originals/42/65/fa/4265fac922a120196162b71e68d32b47.gif');

content: " ";

height: 215%;

left: -50%;

opacity:15%;

position: absolute;

top: -110%;

width: 150%;

pointer-events:none;

}