Accordion responsive background image

[Lyser]

Hello,
I would like to kow to to get a responsive background image with accordion, as you can see here, i got images on accordions but they 're not responsive, just cutted on the right when you resise browser.

Also, how to have a different accordion background-image each time responsive breakpoint happens ?

the code i use to display image on accordion is :

.dague a{
width: 916px;
height: 100px;
background: url(".../acc_dague.jpg");
overflow:hidden;
}
.dague a:hover{
background-position:0 -100px;
}
.dague .x-accordion-heading .x-accordion-toggle {
    padding-left: 82px;
}

[basanta]

Hi There,

Thanks for writing in!

To resize the background you update this CSS code.

.dague a{
width: 916px;
height: 100px;
background: url(".../acc_dague.jpg");
overflow:hidden;
background-size: 100%;
}

if you want to add break point image you have to use media query for that.

for example

@media (max-width: 767px) {
.dague a {
background: url(".../acc_dague.jpg"); 
}
}

The background only works till 767px screen width!
You can add different media query width with different images.

Hope this helps!

[Lyser]

Thank you for media query.
For the background, i’ve added the background-size: 100%; but it seems that it’s still not responsive, (i’ve tested on first accordion).

[nabeel]

Hi again,

For the background image responsiveness, try this instead:

background-size: contain;

You should check out this detailed article regarding background-size property https://css-tricks.com/almanac/properties/b/background-size/

Hope this helps!

[Lyser]

thx a lot !

[ruenel]

You’re welcome.
If you need anything else we can help you with, don’t hesitate to open another thread.