Why is there a background colour behind a Transparent PNG

Site URL: https://www.allsaintsfamilypractice.com.au/

Hi guys,

New to Squarespace... first post.

Just wondering why there is a faded blue colour behind a transparent png image... on an image box.

You can visit the URL to see it...  and I have also added 2  images to show the issue.

example of the png image .... as well as a screenshot of how it looks on the site.

How do I remove this BLUE SHADING?

Thanks in advance

Syco

Can some one please reply?

Would like to know the custom CSS required to remove it?

Have you tried checking in Design > Color yet?

Yes I checked in there, plus other places... but there doesn't seem to have any selection for background colour on the image where I have shown in my screenshots.

I believe there is an option there.

You can also add this to Design > Custom CSS

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

On 2/15/2021 at 10:41 AM, Syco said:

Hi Tuanphan.

Excellent... that fixed the issue for me.

Thank you for your help! 😀

Best regards,

Syco

Hi. The footer on tablet doesn't look good. Do you want to fix this?

Yes...???  What do you suggest?

On 3/16/2021 at 8:59 AM, Syco said:

Yes...???  What do you suggest?

Hi. I think, change to 2 row

Row 1. Title, Logo, text, Social icons

Row 2. Column 1 + Column 3

What do you think?

16 hours ago, julishtv said:

Hi there! 
I have a similar issue, I upload a dummy PNG into a section and it changes the background colour to another colour style, please have a look at the screenshot.
I checked and the png doesn't have any background.
Would really appreciate some help! 

Can you share link?

Sure, can you access this? 
Can you access this: https://marigold-triangle-hnhf.squarespace.com/home
Site is not published yet, please let me know what I can do to share it with you.

Thanks so much for the help!

Hi is anyone around who understands the issue? 
Would really need some help.

12 hours ago, julishtv said:

Hi is anyone around who understands the issue? 
Would really need some help.

 

Try adding this to Design > Custom CSS

[data-section-id="5fde66d25809ae3434fa98db"] .section-background-overlay {
    background-color: transparent !important;
}

This isn't working for me, unfortunately. Any other idea? 

17 hours ago, julishtv said:

This isn't working for me, unfortunately. Any other idea? 

You mean change background to white, like this?

The result that I'm expecting is that I can see the background color of the site. Since I'm uploading a PNG without bachground and the color should look like the image attached (not white) . Please let me know where I'm going wrong 🙂

23 hours ago, julishtv said:

The result that I'm expecting is that I can see the background color of the site. Since I'm uploading a PNG without bachground and the color should look like the image attached (not white) . Please let me know where I'm going wrong 🙂

Add to Design > Custom CSS

/* Fix transparent png background */
:not(.has-background) .section-background {
    background-color: #f7f4f2 !important;
}

/* Fix transparent png background */
:not(.has-background) .section-background {
    background-color: #f7f4f2 !important;
}

Hey @tuanphan! That actually worked, but it took out the colour out of the following section with the logos as well. 
https://marigold-triangle-hnhf.squarespace.com/home
Is there some way we can only apply it to the the one png in the title?

On 9/30/2021 at 9:51 PM, julishtv said:

/* Fix transparent png background */
:not(.has-background) .section-background {
    background-color: #f7f4f2 !important;
}

 

Hey @tuanphan! That actually worked, but it took out the colour out of the following section with the logos as well. 
https://marigold-triangle-hnhf.squarespace.com/home
Is there some way we can only apply it to the the one png in the title?

Use this

/* Sample sample sample */
/* Fix transparent png background */
[data-section-id="5fde66d25809ae3434fa98db"] .section-background {
    background-color: #f7f4f2 !important;
}

How I find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en