Can a pop up image have a transparent png?

Site URL: https://www.happilyeveretter.com/

https://www.happilyeveretter.com/

password: etter

I'm trying to see if its possible to make this popup not have a background at all around the dog. The uploaded photo is a transparent background PNG but its making the background grey. Basically want it to look like the dog alone is sitting on top of the box.

Is this possible?

Hi @ThisWayToFabulous, can you enable the promotional popup on a page so that I can test some CSS to try and remove the background? Thanks!

@Ziggy enabled! Here's what i have enabled. Let me know if you need it a specific way!

Thanks for that, sadly I still can't see it, but that may be because it's a trial site that is password protected, not your fault!

Rooting around for some potential, I've got some CSS for you to try, it may not work, but hopefully a start!

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
  background-color:none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-alignment-left .sqs-slide-layer-content .group-copy {
  background-color:#ffffff;
}

Let me know how that goes!

We're not in trial anymore, but it is indeed password protected until they launch this weekend.

https://www.happilyeveretter.com/

password: etter

@Ziggy actually i just made it public since you're wokring on it curretly! I'll have to pull it down in a little bit tho to not ruin the surprise 

Thanks for that, I can see it now, did the CSS do anything when you placed in on your site?

Updated slightly, or at least put together from your website, try this in your Custom CSS:

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
    background-color: none !important;
}
.sqs-slice .sqs-gallery-design-stacked .yui3-widget .sqs-slice-gallery .sqs-slice-gallery-content {
  background-color: none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-alignment-center .sqs-slide-layer-content .group-copy {
    background-color: #fff;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
  box-shadow:none !important;
}

If that work's you'll also probably want this, to move the close icon, and change it to black:

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-location-inside .sqs-popup-overlay-close {
    top: 42%;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close {
    color: #000;
}

@Ziggy unfortuantely this is what im seeing

@Ziggy just to clairfy i understood right, heres what i have in CSS

/*  Transparent Dog Background PopUp */
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
    background-color: none !important;
}
.sqs-slice .sqs-gallery-design-stacked .yui3-widget .sqs-slice-gallery .sqs-slice-gallery-content {
  background-color: none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-alignment-center .sqs-slide-layer-content .group-copy {
    background-color: #fff;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
  box-shadow:none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-location-inside .sqs-popup-overlay-close {
    top: 42%;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close {
    color: #000;
}

Can you try this tweak, changing the none for an opaque background color?

/*  Transparent Dog Background PopUp */
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
    background-color: rgba(0,0,0,0) !important;
}
.sqs-slice .sqs-gallery-design-stacked .yui3-widget .sqs-slice-gallery .sqs-slice-gallery-content {
  background-color: rgba(0,0,0,0) !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-alignment-center .sqs-slide-layer-content .group-copy {
    background-color: #fff;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
  box-shadow:none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-location-inside .sqs-popup-overlay-close {
    top: 42%;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close {
    color: #000;
}

@Ziggy Here's what replacing that did

If its helpful, this seems to be the back end area where you can change the color? But it does nothing when i make the transparency go to 0 - just goes back to grey

It's rather annoying to edit the pop up with CSS given that you can't toggle it to show on the backend and edit the CSS at the same time. I'm not sure why that isn't working though, I'll have to try it on a website that I have access to with a pop up and try and get back to you.

@Ziggy would it be helpful to give you contributor access?