Studio png images transparent with grey background

Store Design
1

I’m setting up the homepage of my store using the Studio theme, and png images with transparent backgrounds are appearing with a grey background. It’s still transparent, but not seamlessly blending with the white of the rest of the page.

This occurred with an Image Banner, and the slideshow default images display with the same off-white background. Changing the background color in the designer does not appear to have any effect.

Searching the forums I’m seeing this as a known issue with product images, but not with page design or specifically with the Studio template.

Thank you in advance! Any help is very much appreciated.

Images below for example - (off-white areas should be 100% transparent)

Screen Shot 2022-07-20 at 11.25.33 AM.png
Screen Shot 2022-07-20 at 11.25.33 AM.png940×466 89.7 KB

Screen Shot 2022-07-20 at 11.25.04 AM.png
Screen Shot 2022-07-20 at 11.25.04 AM.png925×635 30.3 KB

2

Can you share the link for your store, so that we can look into it? If you do not want to share the link here feel free to send it in a private message.

3

Sure thing - thank you for looking into it!

password: shuphu

After working more with the Studio template, I have run into some other design and function related issues that I would appreciate any guidance on as well if possible:

  1. I would like to set the aspect ratio of the slider to be the same for desktop and mobile - currently it is not possible to design working banners, as they appear to be completely different depending on the device. An example of a Shopify site that has responsive slideshows and banners that retain the same aspect ratio is www.holymountainprinting.com

  2. Is it possible to customize the font size/attributes in the header menu on desktop?

4

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> base.css ->paste the below code at the bottom of the file.
.banner__media{

      background:transparent !important;

}
5

for header menu items plz paste this code at the bottom of the base.css

@media(min-width:786px){
.header__menu-item {
    font-size: 22px !important;
    text-transform: uppercase !important;
}
}