Struggling to style the Accordion element with a transparent background

Has anyone else tried using the Accordion element and setting the background to transparent? I’ve tried using the visual editor and by editing the global CSS, but no luck. Choosing a colour from my colour palette and then setting that to anything less than 100% just gives me a lighter tint of that colour (but still totally opaque).
Using ‘background: transparent;’ in CSS doesn’t work.
Using ‘background-color:’ with an RGBA value in CSS doesn’t work.
Using ‘Opacity: 0.01;’ in CSS doesn’t work.

Surely it must be possible…?

Product:
Wix Studio Editor

What are you trying to achieve:
I’m trying to create an Accordion with a transparent background, so I can sit it over an image. See the attached screenshot for an example of the effect I’m trying to achieve.

What have you already tried:
WiX Studio Editor, Custom CSS, Jedi powers, Swearing at the screen.

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

Hi @Darren_Howe I just tested this and added an accordion, set the items backgrounds to 0% and it worked. or set the color and change % to get the desired look to suit the background image.
maybe it is somewhere in your CSS that is still affecting the .box styling ?

Hey @Dan_Suhr
Yep that works for me now as well. I can’t work out why it wouldn’t to begin with.
Hey ho. We get there in the end.
Thanks for responding.
Greatly appreciated.

I tried to do this but it makes the whole accordion transparent. Can you please give a step by step?

@Laura_flegeau That’s what Darren was trying to do. If you want something different you may need to create a separate post to describe what you can’t achieve.

@Laura_flegeau do you have an image of what you are trying to achieve?

I figured it out. As it turns out I couldn’t find this setting to change the backgrounds until I found this, then put the backgrounds to transparent: [


]

1 Like