Background Image 3 columns - How To

Hi there
My layout uses a background image with 3 regions.
The interesting parts are on the left and on the right side only.
The middle part is to connect the two only, by a red line.

What I am trying to achieve is, that in responsive mode one can always see the left and the
right side of the background picture, where as the middle part can become smaller.

An first idea was to use 3 columns and 3 images. How would I do this in Sydney?
Any idea is welcome.

Thanks
Urs

Hello Urs,

I think that you would need at least two columns with two different background images and use the background-position CSS property:
https://www.w3schools.com/cssref/pr_background-position.asp

Kind Regards, Roman.
aThemes Support

Hi Roman

Thanks a lot. You pointed me to the right direction!

Got it working now.

Cheers, Urs

1 Like

For the audience: There is a concrete example with two images
here

You are welcome Urs!

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.
aThemes Support