Accordion header image in Pro

[PoscoCreative]

Hello!
I want to put an image as the header of my accordion item. I’ve searched through the forum and found/tried a few variations of the following:

$el.x-acc-item .x-acc-header {
background: url(/wp-content/uploads/2024/02/take-the-survey.png) !important;
background-size: cover;
}

I added this into Accordion>Customize>Edit CSS but nothing is happening. Am I doing this incorrectly?

[prakash_s]

Hello @PoscoCreative,

Thanks for writing to us.

I checked the given code on my end and it seems that it is working fine on my localhost. Please ensure that you have added the code to the accordion item–>customize—>element CSS.

You may change this code as well on the element CSS.

$el.x-acc-item .x-acc-header {
background-image: url(wp-content/uploads/2024/02/take-the-survey.png) !important;
background-size: cover !important;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[PoscoCreative]

Hi Prakash_s,
Thanks for getting back to me. I added your code as suggested and I’m still not seeing any change . I cleared cache and tried other browsers but nothing has changed. Please see the image and let me know if what I’ve done is correct?

Thanks!

[PoscoCreative]

[prakash_s]

Hello @PoscoCreative,

I checked your given page URL but I am not able to see any accordion element on the page content. I would suggest you please create a new page and add an accordion there with the custom CSS code then recheck it.

Thanks