Unresponsive Background Image - MODULAR theme - 'icon-row' section

[kbadge]

Hello!

In the MODULAR theme, the theme editor allows for a background image to fill the div. This looks great on a regular sized screen, but as soon as I expand it to full screen, instead of responsively resizing the image, it simply stretches it out.

This is how it should look.

Image 1

This is what it looks like stretched out.

Image 2

I'm a designer not a developer, so maybe I'm wrong, but in my head if it's filling the div, it should be responsive? I've tried multiple image sizes and aspect ratios, but 1024px width png looks the best when the screen isn't stretched. All of them look bad when it is!

I've currently got the image set in the css as:

background-image: cover

Any help/solution ideas with this would be hugely appreciated! 

+ So sorry, but I can't give out the url, as the store is being made in the backend of someone's live store, as a duplicate.

[Jasoliya]

Hi @kbadge 

You have to send store url to check issue, you can email or pm me

[kbadge]

Ah, right.

Does a store have to be live to share the url?

[Jasoliya]

No you can send me password if store password protected or if development theme then send me preview url 

[kbadge]

Unfortunately, it's no my store, it's a clients, so I can't give out the password. I'm really sorry! I'd love your help, and I know that's a pain, and you maybe can't help me without it - which is fair enough! 

Do you have any thoughts on in general, why it wouldn't be responsive?

[Qualitycheck]

Please Share a Store url to better assist

[kbadge]

Hi perennial,

I can't give our the url because it's not a separate development, but instead on the back end of a clients currently live site.

This is my css

.icons-row--background {

    padding: 55px 0;

    padding-top: 150px;

    padding-bottom: 150px;

  display: flex

  max-width:100%;

    height:auto;

background-repeat: no-repeat;

    background-size: cover;

}

[Qualitycheck]

try this 

.icons-row--background {

    padding: 55px 0;

    padding-top: 150px;

    padding-bottom: 150px;

  display: flex

  max-width:100%;

    height:auto;

background-repeat: no-repeat;

    background-size: cover;

min-height:200px;

}

[kbadge]

Thank you for your help!

No change, unfortunately! 

This bit is inside my liquid -- 

style="background-size: cover;background-image:url('{{ section.settings.backImage | img_url: '1024x' }}

[Qualitycheck]

Well, in that case, I need URL in order to provide the correct fix.