Need to Place a Scrollable Container on to a Full Page Cover Image

Hi guys,
I’ve been trying to build my site from scratch, despite being a rank amateur, but I’ve hit the wall trying to create a “testimonials” page.

The page has a full cover image of a packed movie theater with a very bright movie screen facing us. My goal is to have scrollable “credits” appear on the white screen like it’s the end of a movie. I thought my best bet was to create a cover image, then insert a scrollable container on to the white movie screen portion of the image (using “overflow: scroll”.) Then just write up the text content for that scrollable container.

Unfortunately, the cover image causes scaling issues from laptop to iphone. I tried using the image without making it a cover image and the scale issues disappeared, but now I can’t place a container on top of the non-cover image. If anyone knows how I can have the movie theater image as a full page cover or background and can create a scrollable container to insert on top of that image, I’m gold.