Why is the background of my section varies between MacBook and Other PCs?

Hi all,

I have a website and for my colleagues with a macbook, a section (the 2nd section) has its backgrounds color different from the background color(grey) with the background my image(white), whereas in my pc’s monitor, the background of the entire session is homogeneous.

Can I ask why and how can I solve the problem? Thank you!


My web’s url: https://www.growthmarketer.academy/growthmarketingbootcamp-2019may
Here is my site Read-Only: [https://preview.webflow.com/preview/bootcampc2?utm_medium=preview_link&utm_source=dashboard&utm_content=bootcampc2&preview=a4044d12eca82d811d4e60683057b42e&mode=preview][1]

From home page click ‘learn more’ to go to the referred sub page, and then look at the second section Thank you.

Are we talking about this section?

If so - plz describe the issue again :slight_smile:

hi shokoaviv,

yes, i was referring to this section.

The problem that I encountered is, when some of my macbook colleagues look at this section, the background color of the section is inconsistent with the background color of the venn diagram image, which is not shown in the screen shot.

Just wonder if this problem is common and is there any ways to deal with that?

Cheers,
Jackie

@Jackie_Yuen I’m not able to reproduce the issue on my 2018 15” Macbook Pro, however, can you produce the graphic with a transparent background? You are already using png, if you’re going to use that format you should use the transparency it offers!

PNGs are almost always bigger than jpgs, so there is no point in using them (most of the time) if you aren’t trying to have a transparent background.

Does that help?


Hi Sam,

I am not sure about the transparency problem, but seems that the problem is not limited to graphic, but also the section area around it, I have attached the screenshot of both my colleagues’ pc and mine (his is mac book and mine is microsoft). But there is such a great difference. Can I know why this display problem exist?

Thanks a lot for your help.

Cheers,
Jackie

I would suggest that you at least start you comparison between the same browsers across OS’s.

Apples and oranges are hard to compare.

Is this a Edge on Windows versus Safari on OS X, or …?

Also comparing the graphic output of one device and another can have similar issues. Apples and oranges. I use calibrated monitors on all my machines. I have a baseline for for comparison of colors and shades.

Please be as specific as you can about what you are comparing. It would also help if you markup screenshots so you can point out what you are focusing on and what was the source.

@Jackie_Yuen take a look here:

This section (25) has a background color of rgba(218, 135, 135, 0) and the divs with your two images have backgrounds of #fff (white), as I’m not able to recreate the issue I’m not 100% sure this is the cause. Try setting the bg color of your container div (25) to #fff.

That may resolve the issue.