Responsive background image in color section

Well your background image you have to know the aspect ratio. If you know that you can try to obtain your desired look by calculating the hight.

First: do not set in the color-section dialog a min-height !
Set your background image to “scale to fit”
on my test page (page-id is 2981 here) the aspect ratio of the image is 350px : 1500px
that means image-height is nearby 23.5% of the image-width

the css rule than is:

.page-id-2981 .avia-full-contain {
    background-size: 100vw;
    height: 23.5vw;
}

See example here: http://webers-testseite.de/ikom/circles/

You have to set some media-querry solutions for the content of that color-section

vw and vh are video-screen width and height ! viewport units are good supported now: Link

but to make it specific and not for all either you give the color-section a unique ID or custom class or (see above) do that only for that page.

if you got an overlay color – you have to set the same parameters to that class:

.home .avia-full-contain, .home .av-section-color-overlay-wrap {
    background-size: 100vw;
    height: calc(66.7vw);
}

see here: http://webers-testseite.de/ikom/
but you see this works for simple layouts – on that start page there is an overlapping container following etc. pp. in that case there has to be more adjustments to make

• This reply was modified 8 years, 3 months ago by Guenni007.