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

Highlighted
Tourist
25 0 1

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 1Image 1

This is what it looks like stretched out.

Image 2Image 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.

0 Likes
Highlighted
Shopify Expert
3897 559 935

Hi @kbadge 

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

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
25 0 1

Ah, right.

 

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

0 Likes
Highlighted
Shopify Expert
3897 559 935

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

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
25 0 1

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?

0 Likes
Highlighted
Shopify Expert
1381 112 211

Please Share a Store url to better assist

0 Likes
Highlighted
Tourist
25 0 1

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;
}
 
0 Likes
Highlighted
Shopify Expert
1381 112 211

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;
}
 
0 Likes
Highlighted
Tourist
25 0 1

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' }}

 

0 Likes
Highlighted
Shopify Expert
1381 112 211

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

0 Likes