Background Images are too short on mobile

Hey,

I’m using Moesia Pro on this website: stphouse.com/dev.

I have a problem with the row background image when responsive - the image ends before text does (screenshot).

How can I set the images to be parallax on every screen size so the height of the image will stay fixed?

Thanks,
Hadas

Hi,

Please post a link to the page on your website where this happens, so I can check.

Best Regards,
Csaba

Hey Csaba, it happens here:

  1. Homepage - Testimonials & News sections

  2. “Your service with us” section (juggling man) & “Your First Customers Are Your Best Marketing & Growth Tool” section (dark city photo).

  3. This page

Thanks!
Hadas

Hi,

That have happened, because the background size is set to auto below 1024px, you can make that to still cover the area on screen-sizes below 1024px too, with this Custom CSS:

@media screen and (max-width: 1024px) {
.panel-row-style {
    background-size: cover !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

It works, thanks! Awesome!

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba