york template - background colors of index page tiles

Hi,

When I'm adding new tiles to my portfolio (using the York template), the background color of the image is usually applied to the entire responsive tile.  For some reason, when I add new images, it's assigning a lighter tint of the color (making the edge of the image obvious & not seamless. (screenshot attached).  

How is that background color getting assigned? Any ideas why new ones that I add are not seamless like my 6 existing portfolio items (& the York demo site)?

Thanks for any insight!

Hi,

What is site url? We can check easier

OP, managed to find a workaround through some googling. If you convert your index images to .gif then the matching solid background color should work.

I contacted support and they were not helpful. The person had suggested that the lighter auto background color was by design. They had also suggested that the source image size, being different from one card to another, would affect it which is bonkers. 

On 6/27/2023 at 7:01 PM, kcjling said:

OP, managed to find a workaround through some googling. If you convert your index images to .gif then the matching solid background color should work.

I shamefully spent hours trying to figure this out, auto-colour wasn't working, tried using the crop image function, everything I could think of to fix the issue.

Had to make an account to say thanks. 

This definitely shouldn't be so difficult to fix

I have been having the same problem. It has been so annoying that I considered leaving squarespace altogether. Indeed they have not been helpful at all. I will try the .gif, thank you in advance. :)

3 hours ago, tinat1570048476 said:

I just tried to add a new section to my index page and am having the lighter BG issue, too.  Is there any way to do this with code?  The GIF suggestion does work, but GIF images (and 256 colors) are not ideal for photographs.  Please help!  thanks in advance.

Can you share link to page?

The background color in the York template is likely being assigned automatically based on the image's dominant color. The lighter tint issue might be due to differences in image properties or how the template processes new images. Check if new images have different file types, color profiles, or dimensions compared to the existing ones. Adjust image settings or consult the template's documentation for consistency.