Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I recently uploaded a blog post with a featured image that is transparent expecting that the background will match the background of my webpage. Instead it shows a slightly lighter green. I look into the code to make sure it's not set as a different color, and found that even if I hard code it to be the background value, it keeps showing a different color green. I tried testing out with different value rgb already so I know for sure that I'm in the right section, as changing the value changed the featured image container:
background-color: #f0f0f0 /*hard code value to test*/
background-color: rgb(var(--color-background));
I'm pretty stumped and don't know where else to look. I'm currently using the Sense theme. Other than this container I do see that this green shows up as a "background" color a few other places as well and not matching the rgb value I was using in the schemes shown above (#25463C).
Hi @BaconBec
Check the opacity of that background.
I tested out with the opacity which results in the following:
background-color: rgba(255,0,0,1.0);
gives a red background
background-color: rgba(255,0,0,0);
gives the light green background.
This means that the container background is completely transparent right now and I'm seeing through to whatever is the website background. So now, if the website background has a different opacity, do you have some idea where I can find this in the code or setting?
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025