Image having a color overlay where it should be white

Site URL: https://kamu.squarespace.com/

There seems to be a greyish/blue overlay. You can see it at the top of the image. No matter where I go, I cannot remove it. It looks to be the background showing through. I am newer to squarespace, but have been a hand coder for years. 

I have attempted to 

1. Save as a .jpg (made sure it was pure white before exporting it in photoshop)
2. Save as a .png (made sure that I turned off the transparency)

The template I am using is Colima. This has happened before on another theme and is extremely annoying. 

Hi, can you share the password or remove the password so people can take a look to help please? 🙂

Any resolution? I have the exact same issue and have been working on it for days! I have a simple infographic with a white background, but it always shows up with a pink overlay. 

On 2/16/2020 at 11:57 AM, brjodaro said:

Any resolution? I have the exact same issue and have been working on it for days! I have a simple infographic with a white background, but it always shows up with a pink overlay. 

Can you share link to your site?

Found any solution to this? Been struggeling for days too...

I am having the same issue.

I don't see it viewing the site with chrome. Could have been an auto cropping issue. 

I'm having the same issue and I'm using version 7.1.  All of the images have a blue overlay and I believe I've checked all settings. 

Has anyone found a solution to this?

7 hours ago, JessScarcella said:

I'm having the same issue and I'm using version 7.1.  All of the images have a blue overlay and I believe I've checked all settings. 

Has anyone found a solution to this?

Can you share link to page in screenshot?

I'm having the same issue as well, and really need this fixed at https://www.malsanders.com/about-me .

It only does it on some images though, even though I create them the same way (Figma). 

Tested with Chrome, Safari, jpg and png. 

Ok, I have found more on this.  Before you load an image it shows the blue box (below) as placeholder.  When you load an image, this seems to stay as on overlay.

But it depends on the image design:

Inline = it works ok

Poster, card, overlap, collage, stack = blue

By going into inspect, it goes away when toggling this off:

<div class="image-overlay" id="yui_3_17_2_1_1590120390667_457"></div>

Please fix!

Screen Recording 2020-05-22 at 2.03.15 pm.mov

Has anyone had a resolution to this?

Simple translucent PNG files have overlay on as MalSanders pointed out.

Hi Guys

I had the same issue as well. I added the below into custom CSS and it removed the colour overlay.

.image-block .image-overlay {
    background: none !important;
}

Panster -- The code does not work for me. I copied and pasted it exactly -- I am not  a coder, is something missing? </script> ??

Anyone -- Is there any other way to get rid of the light blue tint over the photos?? It is a Square Space issue that has no reason to be there, I don't understand

Just now, SterlingArcher said:

Panster -- The code does not work for me. I copied and pasted it exactly -- I am not  a coder, is something missing? </script> ??

Anyone -- Is there any other way to get rid of the light blue tint over the photos?? It is a Square Space issue that has no reason to be there, I don't understand

If you share link to page in screenshot, we can check easier.

This worked for me in 7.1: (shortcut version is at the bottom of this post)

1. Click on menu items as follows:

2. Home menu>Design>Colors>Section Themes

3. Find the Section Theme that's giving you trouble (ex. White Minimal)

4. Click on the pencil icon

5. Scroll to the Image Block where the problem is occurring (ex. Image Block Card)

6. Find "Image overlay" and click on the dot to the right (mine was maroon)

7. A color palette opens. Click on the top left corner of the palette or use the slider at the bottom to make the color white. 

8. Wait a second for the change to take place. You should see the dot change to white. 

I think you can also do this directly from the image block itself by going to Pages, clicking on the page you want to edit, click Edit, then hover over the block that's giving you problems. Click the pencil icon to edit the block (not the image), then click "Colors" in the pop-up menu. The theme you are currently using should be highlighted. Click on the pencil icon on your current theme, and it takes you to the Section Themes design page and you can follow steps 5-8 above. 

This worked for me - thank you so much! 

@PolSpeech THANK YOU SO MUCH this was driving me insane. Your solution works! 

@PolSpeech, Thank you, thank you for sharing this insight!

None of the solutions are working for me, I've tried different code from above and from other posts etc. Nothing works. I've also tried making the overlay white and also tried reducing and increasing the transparency to each extreme. Why isn't there a simple option to turn off the overlay? A simple search shows so many users having this issue and it's really discouraging to see this as someone who is new to this software. Btw, I'm using the ZORAYDA theme if that helps.

On 7/2/2020 at 2:41 AM, MLKCC said:

None of the solutions are working for me, I've tried different code from above and from other posts etc. Nothing works. I've also tried making the overlay white and also tried reducing and increasing the transparency to each extreme. Why isn't there a simple option to turn off the overlay? A simple search shows so many users having this issue and it's really discouraging to see this as someone who is new to this software. Btw, I'm using the ZORAYDA theme if that helps.

Have you solved it yet?

1 hour ago, tuanphan said:

Have you solved it yet?

Not yet, still hoping someone knows how to fix it, tried everything I found from other posts.

5 hours ago, MLKCC said:

Not yet, still hoping someone knows how to fix it, tried everything I found from other posts.

Add to Home > Design > Custom CSS

.image-overlay {background: transparent !important;}

12 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.image-overlay {background: transparent !important;}

 

Hi Tuanphan,

Thank you for trying, but it's not working 😞

26 minutes ago, MLKCC said:

Hi Tuanphan,

Thank you for trying, but it's not working 😞

Can you share link to page where you has problem with image?