Background color of images

[Triin]

Hi

I remember the background color of the images when zoomed in used to be white. I noticed that a lot of pictures are a bit “hairy” and need to be photoshopped. No time for it. Is it possible to change the background color back to white?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Triin]

Here you are:

https://sahvrirotid.ee/toode/ouna-mundilimonaad-mahe/

[Elvin]

Hi,

I’ve inspected your site and found that the background-color for the hovered zoomed images are still white (#fff).

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
    background-color: #fff;
}

Perhaps what you meant was the popup modal when you click the magnifying glass icon?

If so, you can try adding this CSS:

.pswp__bg{
background: #FFF !important;
}

A wise man once said:
"Have you cleared your cache?"

[Triin]

Hi ELvin,

Yes I meant when you click on magnifying glass then there’s black box behind the image.
Your code changes the color to white but it flashes first from black to white. It’s definitely better than before. Any chance there’s a code which does the job without flashing between colors?

[Elvin]

Yes I meant when you click on magnifying glass then there’s black box behind the image.

That’s the placeholder’s background color (#222) that displays within the split second before the product display.

Adding this CSS address that.

.pswp__img--placeholder--blank {
    background: white;
}

A wise man once said:
"Have you cleared your cache?"

[Triin]

Thank you 🙂 This worked perfectly!

[Elvin]

Nice one! No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts