How do I add a background to transparent images when zooming in?

[Khyamtents]

I am using Prestige theme and I have an off white background. When I look at my product images with transparent background they're off white:

However if anyone (on desktop only) zooms in, the background goes to black, and half the image is then hidden:

How do I have the zoomed in background colour the same as my main page colour?

[Small_Task_Help]

Hi,

Custom CSS can help you.

CSS code example

/* Example CSS */
.zoomed-in-image-container {
    background-color: #f7f7f7; /* Replace with your off-white background color */
}

[Khyamtents]

Thanks, but didn't work 😞 

If it would be of help, here's the link:

https://khyam.co.uk/products/loktek-igloo-mk3-fast-pitch-tent 

[Small_Task_Help]

Can we check from our end? if yes then you can contact us (details in signature)

[Moeed · Accepted solution]

Hey @Khyamtents 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.ppzoom__item {
    background: #FAFAFA !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Khyamtents]

Thanks - worked great

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.