Parallax images in column issue

Hi,

I’m having issues with parallax images. Basically, I have 3 columns with 3 images of musicians in the background, I’m having issues with parallax on them. Ideally, I would like the musician to be centre stage in each column but I’m having positioning issues and when scrolling I don’t want the image to repeat in contain. Has anyone got any suggestions? Do you think I need to resize the photos before uploading? Website Link below. These are the photos I’m using from Pexels:
https://www.pexels.com/photo/women-s-black-and-white-dress-1808704/
https://www.pexels.com/photo/close-up-photo-of-man-singing-1813137/
https://www.pexels.com/photo/woman-playing-ukulele-1537171/

Thanks for your help :slight_smile:


Here is my site Read-Only: https://preview.webflow.com/preview/musifest?utm_source=musifest&preview=0dfbf51b56d112e2e2bee788ff009d9e
(how to share your site Read-Only link)

1 Like

You need to set them to cover and center so they sit in the center of the div. I’d also turn off repeat since it’s unnecessary. If your subject isn’t in the center of the image, you’ll need to pick a different image. Background:cover applies based on the viewport height and width, not the div so it will cut off parts so it fills the div.

1 Like