[pinheadncParticipant]

I have read every Forum entry on this topic and been unable to make an image appear as a heading in an accordion.

Here is what i have:
1. A valid image – just a test image already in my library – http://www.practicalm.net/wp-content/uploads/2016/02/Blog-Footer.jpg

2. I have a basic accordion added to my offerings page: http://www.practicalm.net/offerings/
In the ID section of the accordion I have named it offeraccordion

3. I have added this code to Appearance > Customize > Custom > CSS
.offeraccordion .x-accordion-heading .x-accordion-toggle {
background-image: url(“http://www.practicalm.net/wp-content/uploads/2016/02/Blog-Footer.jpg”);}

overflow:hidden;
text-indent: -99999px;

The code is taken from other forum entries.

Nothing changes?

Thoughts?

[pinheadncParticipant]

I need to updated this – Scratch my previous entry. I am very close but not quite there.

First I have images in my Accordion Headers, everything opens and closes properly, HOWEVER they DO NOT scale. When I open the page on my cell phone the header image is running off to the right.

Here is what I did to make it work.

1. In CornerStone, I placed a single accordion in the section. My accordion has 8 sections.
2. for EACH Accordion section, I gave it a name in the Class section – for example offerassessment is the name of the first section.
3. I repeated this for each accordion section giving each a unique Class name.
4. I created 8 images 1500px by 75px tall and uploaded them to the Media Library
5. Then back in WordPress and went to Appearance > Customize > Custom > CSS and for each accordion section I added this code:

.offerassessment a{

background: url(http://www.practicalm.net/wp-content/uploads/2016/02/accordion0.png);
text-indent: -999999px; /* hide text */
overflow:hidden;
}

The images appear, but they are not sized exactly right. I could fiddle with them in photoshop but is would not matter because they would still be off on a mobile device.

How can I know the exact dimensions of the accordion header and make these images responsive?

[RadModerator]

Hi there,

Thanks for writing in.

It’s good on my end, I guess what’s left is to make it responsive. Please change your CSS to this:

.offerassessment a {
    width: 100%;
    height: 0px;
    padding: 0px !important;
    background: url(http://www.practicalm.net/wp-content/uploads/2016/02/accordion0.png);
    text-indent: -999999px;
    overflow: hidden;
    padding-bottom: 6.7% !important;
    background-size: cover;
}

The padding-bottom: 6.7% !important; will help re-adjust the width while maintaining the aspect ration of the image.

Cheers!

[pinheadncParticipant]

Your support is FANTASTIC! I always get great answers.

For people like me that search the forums before they post, here is what I had to do to make it work.

The steps two posts above are still valid. The CSS in the reply above works like a charm.

One final tweak on my side. I had to resize the images to exactly 1110px wide and 75px tall. Any wider and the right side of the image was missing.

I have tested it on windows, android (holding my phone horizontal and vertical), and iOS (holding my iPad H and V) and everything works perfectly.

Happy dude here!

[Prasant RaiModerator]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts