How to make a background image stretch with accordion?

Hi All,

Well I was not planning on working on my websites this week, but while im waiting for my covid test results to come in, as my wife now has Covid :frowning: and not feeling too good, I thought I would do something practical while keeping out of the way of the kids.

So…I have a Bloc that with an image set as background - in this I have the accordion bric in it, with content in, when i open the accordion I would like the back ground image pushed lower down.

I have done a sketch to show what I am after - is this possible in Blocs?

Thanks all.

Using “Toggle visibility” might be a smarter option.

1 Like

Thanks @Jerry

Not really used this - will have a play with it now.

Just had a look - at this, it does not seem to work the way they want it though - as small bloc with content and then on a click it opens fully with the top and bottom stretching.

Wondering if there is a way to create the background stretched. This would distort the image I guess.

Something like this?

1 Like

Hi @Jerry,

I have the accordion bit ok - its the background I’m after - would like the content background to stretch vertically if this can be done?

If you add a background image to it and see what happens?

This has reminded me that I could do with this for another thing I am creating ! thank you.

1 Like

Vertically only would make your picture(s) look funny.Untitled4

1 Like

Not at the Mac, but do you have the option within the accordion to set the background image to ‘cover’?
It won’t stretch, but it will crop and not leave any odd spaces.

1 Like

hi @TrevReav,

Yeah I tried that and it still zooms the graphic/image I want out of the page when I drop the accordion down.

What I have done for now is set the image as background in the bloc and then set it to repeat, i kind of get what I am after !!!

1 Like

I’m not on my Mac either. But it would probably be defining the background size with overflow hidden.

1 Like

Thanks @PeteSharp

sounds good…lol…I will try that - setting the size and hide the overflow and see what happens.

Hi, I’m having the same problem, did you managed to solve it?

Hi @odd1,

I did manage to do it - but was 2 years ago !

But I am sure from my notes above I had the image as the background in the bloc and set it to repeat in the class editor. My client was so happy with this result.

Hope this helps.


WOW ! the original post & this website has brought back the time I first had covid (had a test done during that time) and was when the virus was at its strongest and my wife and I were really ill for weeks and could have gone either way for both of us - both still suffering long covid now, my wife can not taste mint and other things properly and my breathing is still bad and burning lungs when i get out of breath!!!

I am so happy im still here to reply to it and read it!

1 Like