Images aren't responsive

[Smicky]

Hey Apex Support,
I am sure this is a simple fix, but I can’t figure out how to get these background images to be responsive when viewing on a mobile device…The opening text is the same way. It stays large while the paragraph that is done two rows is responsive.

http://dev.dailymirror.us/

any words of wisdom?

[mldarshana]

Hi Brandon,

Thanks for writing in! Could you please review the following thread and see if that helps (https://theme.co/apex/forum/t/section-background-image-not-responsive/37435).

Also here’s another thread that should help you to fine tune your background images (https://theme.co/apex/forum/t/fullscreen-responsive-background-image/4796/4).

Hope that helps.

[Smicky]

I took at the exampled that you sent as well as exampled on those pages. However, the problem I am running into is that the background is stretching WAY more than just the sector the way it is supposed to. I would get how this is a “cover versus container” issue if just a little bit was getting cut off but it is zooming way further in than it would need to even to cover the entire webpage.

Any other ideas?

[thai]

Hello Brandon,

Actually it’s a bit difficult to achieve a total responsiveness for background images without compromises. I suggest yo to try out having two different sections, one for mobile and for desktop and set the properties accordingly. And under Customize > Hide During Breakpoints you can hide the section depending on the screen-sizes. https://cl.ly/2B3M3C09013M

You can take a look at following page to learn more on how background image works:

https://davidwalsh.name/demo/background-size.html

You can also try out following solution. First set the background size to Cover. After that, In the first section (https://cl.ly/282O1m0g2P17) add a custom Class under Customize > Class https://cl.ly/1W0y1h1z0d3f. After that add following CSS under Pro > Theme Options > CSS:

@media screen and (max-width: 890px){
    .custom-class .x-bg-layer-upper-image {
        background-size: contain!important;
    }
}

You can replace class name as per your requirement.

Let us know how it goes.

Thanks.