background image in section - issue on IOS devices

geflogenheiten's picture
geflogenheiten
Tue, 09/22/2015 - 20:00
#1
background image in section - issue on IOS devices

case :

  • set background image in custom section 'about' (of clone of home template (AWE))

  • mode 'parallax', 'parallax scrolling' =  on, 'fullscreen section' = on 

While it sizes correctly on desktops, it does not at all on IOS (iphone, ipad). 

Furthermore I cannot see the background image in edit mode of a basic page.

Can you check please.

thanks

phuonght's picture
phuonght
Wed, 09/23/2015 - 06:21

Hi,

We will check and reply ASAP :)

geflogenheiten's picture
geflogenheiten
Wed, 09/30/2015 - 03:21

any news?

phuonght's picture
phuonght
Wed, 09/30/2015 - 03:59

We checked on your site and see only background parallax in "Keep in touch. We take care of every aspect of our image. Is the most important thing."

That image background is a bit small so in ipad or mobile devices, it will be resized, vertical of image will be not enough to cover background. You could use another one. We recommend image should have size 1200x649.

geflogenheiten's picture
geflogenheiten
Wed, 09/30/2015 - 06:07

Hi,

   yes, that's the one I was referring to (Keep in touch ...).   I replaced the jpeg now with a new one of size 1200x801 (to keep ratio).

   I still see the same behavior.  You can only see a small part of the jpeg on IOS (iphone5s in this case).

phuonght's picture
phuonght
Wed, 09/30/2015 - 06:24

Could you send us some screenshots?

geflogenheiten's picture
geflogenheiten
Wed, 09/30/2015 - 06:52

here you can see a actual screenshot from the current jpeg on the web displayed on iphone.  You see only a part of the image (green background)

screenshot iphone

phuonght's picture
phuonght
Wed, 09/30/2015 - 23:02

We fixed problem already. On mobile, image was covered so it could not be seen fully. 

But that image is a bit small, please try with larger one.

geflogenheiten's picture
geflogenheiten
Thu, 10/01/2015 - 03:02

can you let me know the fix, because I'd like apply it on the final prod instance as well

phuonght's picture
phuonght
Thu, 10/01/2015 - 03:21

We just inserted the following code at the end of file style.css: 

@media (max-width: 992px){

 .awe-section-76-4 {

  background-size:100% auto !important;

 }

}

geflogenheiten's picture
geflogenheiten
Thu, 10/01/2015 - 06:26

I tried now a jpeg with 1200x801  as background for the known section ("we take care of ...").  Unfortunately again not sized on IOS :-(

Would be great if you can check once more

cindy's picture
cindy
Fri, 10/02/2015 - 05:14

Hi,

Please check again

We have just made some fixes

But your image is still a bit small, you should try a bigger one

geflogenheiten's picture
geflogenheiten
Fri, 10/02/2015 - 07:30

hi,

thanks for the update. I did three tests with an image 1200x801,   but I'm afraid we are not yet there. 

on ipad2 air it shows only a blue background(a small piece of the image) and on iphone 5s the image is displayed twice(1st on top is centered and cut on the right and left, 2nd one shows only a piece of the top of the image).  Parallax scrolling does not work at all.

thanks for analysing this further

cindy's picture
cindy
Sun, 10/04/2015 - 22:59

Hi,

Please use background 1200x649 and then feedback us

geflogenheiten's picture
geflogenheiten
Mon, 10/05/2015 - 03:28

I tried the same image in 1200x801 ( to keep ratio).  

This is how it looks on iphone. You see it is repeating.

Feel free to replace it with one of your images. I'm happy to test again.

Image title

phuonght's picture
phuonght
Tue, 10/06/2015 - 05:05

Please check your site again :)

geflogenheiten's picture
geflogenheiten
Tue, 10/06/2015 - 11:32

checked. status:

desktop - working with parallax scrolling

iphone - section filled with background image(ok, but no parallax scrolling)

ipad - image not sized,  only a part of the image is visible (like iphone before your latest update)

phuonght's picture
phuonght
Tue, 10/06/2015 - 23:04

- On iphone and ipad, there will be no parallax scrolling because it can make your image repeat. 

- On ipad, image is scaled for whole section so you could not see some parts of it. If you would like to see all, image must repeat. There is no way to satify all 2 conditions.

geflogenheiten's picture
geflogenheiten
Wed, 10/07/2015 - 05:37

Hi, 

thanks for the update.

What parallax concerns - ok. 

However I used the image size your suggested, but the image is not visible fully on both devices.  Shouldn't this be possible ?  

this is how it is looking currently on iphone

iphone

and that's ipad screen

ipad

Log in or register to post comments
Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.