Adding image to SVG path - css

Question

I found some cool SVG code from and started trying things out. Now I cleared up most of the random code but now I want to add an image on the grey block, but cannot seem to get it to work. I tried a few tips from StackOverflow already like adding random classes to it and creating extra id's in the code but it still won't work. I would like to create something like this.
.slide {
position: relative;
padding: 8% 0;
}
.slide__image svg {
display: block;
width: 100%;
max-width: 560px;
margin: auto;
}
.slide__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
<svg>
<g id="p">
<path opacity=".2" d="M0 2h252s-3.3 40.7-2.7 128.3C249 216 252 272 252 272s-88-2-124.3-
2C91.3 270 0 272 0 272V0z"/>
<path fill="#f4f3f1" d="M0 0h248v270H0z"/>
<path fill="#4f5150" d="M8 10h233v203H8z"/>
</g>
<g id="polaroid">
<use xlink:href="#p" transform="rotate(15)" x="175" y="50"/>
<use xlink:href="#p" transform="rotate(-5)" x="5" y="25"/>
</g>
</svg>
Thanks for looking at the question!