Why don't background images scale as expected.

REALLY painful client right now.... www.sisudanceacademy.com/

The background image at the top (actually 3 images I stitched together into 1) looks fine on a 16:9 type screen, but as soon as you go to a 4:3 or laptop screen, the edges of the image get cut off. Perhaps my understanding of image scaling in responsive is wrong, but I thought they scaled in both dimensions. Or have I just done something wrong.

FYI, those BG images are in a PB module as there are a bunch of pages with different images there.

Cheers Ced. Hope you're staying safe.

Hi
I'm safe, thank you

I think that there is a misunderstanding about how things works.
1/ <img /> HTML tag
>> it uses the size of the image to define the area which is used. By default (with correct css) the image will reduce its width and height accordingly, to be responsive

2/ background image
>> it takes place behind a HTML tag. It does not define any size, it will not adapt the content height, it will not be really "responsive"
you can set few settings for a background image size :
- cover :will fill all the available space and crop what is outside
- contain : will fill the area with the largest dimension, and leave some blank space around (no crop)

in your case you have a background image, so 2 solutions if you don't want to crop it
1/ use background size "contain"
2/ set a height on the container (html tag) which is the same as the image ratio. You can define it using VW (viewport width)
example : image 1200x800 = 67%
div#ID { height: 67vw; }

but all that has nothing to do with Template Creator CK ! this is only some CSS knowledge which is used all around the world
CEd

Hey Ced

Thanks for the awesome explanation. I did a bunch of fiddling with various images and sizes. Ended up having FOUR different versions to make it display reasonably across all devices. Still a little "not what I quite want" on screens about 1000px wide. Thanks again.

Couldn't find where to set "Contain". I only have None or Cover.