How to add image to Accordion?

Support
#1

Hi. I would like to add an image to my accordion titles and have followed the post here https://theme.co/apex/forums/topic/using-an-image-as-accordion-title/ (using pro)

I added the following css to my accordion and customizer as follows and sized the image to 35px x 35px

[accordion_item class=“badge_builder” title=“100 pts - Personal Ownership and Engagement Badge” open=“no”]

.badge_builder a{

width: 35px;
height: 35px;
background: url(https://mysalus.org/wp-content/uploads/BuilderRank-100x100-100x100-1.png);
margin-right: 15px;
}

The result however show a larger image and not title as can be seen here https://mysalus.org/community/commons/#tab-3 (first accordion thus far)

Ideas? Thanks

#2

Hello There,

Thanks for posting in! To resolve your issue, please make use of this custom css instead:

.badge_builder a{
  background: url(https://mysalus.org/wp-content/uploads/BuilderRank-100x100-100x100-1.png);
  background-size: contain;
  background-position: top left;
}

Hope this helps. Please let us know how it goes.

#3

Hi and thanks for the modification. Getting closer but the css fills the accordion with repeated images. https://mysalyus.org/community/commons/#tab-3

How do I limit the image to one just left of the title with about 15px margin on the right between image and title?

Thanks

#4

Hi There,

Add a background-repeat: no-repeat; to your current CSS code and a padding-left: 3em; to give room for the chevron and title, so it won’t overlap with the image.

Hope it helps,
Cheers!