Background images don't appear on phones and tablets

[cocrid]

I’m editing the following site for a client,
energyplusny.com

The issue is that though media queries are all good, the hero images on the home page don’t appear on tablets and phones.

It shows a grey area instead. Perhaps images are too large?

[Manual]

@cocrid What images are you referring to?

[Knaper Yaden]

If you have super-wide pictures (i.e. https://www.energyplusny.com/images/just_bg.jpg but even https://www.energyplusny.com/images/services.jpg) you need to have some way how you plan them to scale to narrow screens (you can’t just scale it down to width fit all because you’re gonna be left with huge empty space in the hight.)

For one of the pictures (https://www.energyplusny.com/images/upgrades_solutions.jpg) If seems indeed to be done with a separate crop of the picture (https://www.energyplusny.com/images/upgrades_solutions_home_mobile_2.jpg) that loads for mobile…

[cocrid]

@Knaper-Yaden @Manual Thanks!

The issue, though is that all the images are looking good on narrow screens, just 2 of the 3 images the hero section animates between don’t appear on IOS devices.

It first had the background-attachement: fixed property that doesn’t work on IOS, I changed it to scroll for screens under 800px, yet it still didin’t help.

I tried testing with browserstack, it worked there, but hasn’t on a real device.

[Knaper Yaden]

@cocrid said in Background images don't appear on phones and tablets:

hero section

I don’t have an answer for you, but you keep on saying “hero section” while the page doesn’t have a section like that. I guess you’re referring to something but you’d need to mention it by the div name etc.

[cocrid]

@Knaper-Yaden

Thanks for making me aware, I thought it’s common knowledge that the uppermost part of the website is called the hero section.

The name of the div who’s images don’t appear on IOS is .welcome-container.

[Williamsburg]

Did you try other browsers except from Safari?

[cocrid]

Yup, @Williamsburg, Chrome didn’t work either.

Did you test it on your phone?

[Williamsburg]

@cocrid said in Background images don't appear on phones and tablets:

Yup, @Williamsburg, Chrome didn’t work either.

Did you test it on your phone?

I don’t have an IOS device, see if this link might help you.

[cocrid]

Thanks @Williamsburg,

I saw that stack overflow post already, but it doesn’t help.
I don’t care so much that the background should be fixed, I just want the images to be visible.