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

New Member
19 0 0

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.

Screenshot 2019-12-13 at 13.54.03.pngImage 1

This is what it looks like stretched out.

Screenshot 2019-12-13 at 13.54.15.pngImage 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
2461 414 519

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
19 0 0

Ah, right.

 

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

0 Likes
Shopify Expert
2461 414 519

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
19 0 0

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
Shopify Partner
1125 90 137

Please Share a Store url to better assist

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
19 0 0

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
Shopify Partner
1125 90 137

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;
}
 
Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
19 0 0

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
Shopify Partner
1125 90 137

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

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes