Scale background cover image properly

[webharvest]

I'm using the wellness pro theme and I was checking out how my site looks on an iPad and a IPhone Plus. The frontpage background images don't scale properly. All you see is a small piece of the image. I figured it was because the images sizes are just too big that are recommended in the theme settings.

So I added some custom CSS which I thought would replace the background image for the front-page-1 section on the iPad and IPhones. When I use the chrome developer tool it switches to the other image and all looks good but when I go to the actual iPhone and iPad it is like the larger image is still being used.

@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.front-page-1 {
background-image: url(http://www.mysite.com/xxxxxx-480.png);
}
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.front-page-1 {
background-image: url(http://www.mysite.com/xxxxxx--860.png);
}
}

I don't understand why it would look good on my computer and confirmed using the right image with chrome developer but not with the actual devices.

Any ideas/suggestions would be greatly appreciated.

http://www.e3financialcoaching.com

[Victor Font]

Different device resolutions perhaps? Try using retina images for Apple devices.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[webharvest]

Is there a good rule for what the best way is to implement scaleable image for apple devices?

[webharvest]

I don't fully like the solution I came up with but it appears that the iPad and iPhone don't like the background-attachment: fixed when the background-size is set to cover. I changed the background-attachment: scroll using @media conditions and it sizes the image properly now.

Don't know why it acts strange with it set to fixed.

[Lisa at OG]

I had the same problem with the Centric Pro Theme and also the Wellness Pro Theme. Adding the background-attachment: scroll !important worked for me as well. When I got a reply from StudioPress customer service they said the following, "Unfortunately, it's a limitation on iOS, where fixed background image property is ignored on purpose to conserve browser's processing, in effort to ensure performance. But, I'll be happy to pass on this feedback to the development team, so they can review and possibly include some CSS workaround, in next theme's update."

[Kitty]

...and that is really appreciated, Lisa! Thank you for sharing!

[Author]

Posts