Background Image on iPad displaying huge - Support | Kriesi.at

Viewing 25 posts - 1 through 25 (of 25 total)

Author

Posts
April 12, 2015 at 6:20 am #427109
LukeHopkins
Participant
Hi,

Hoping someone can help me with this problem.

I’ve got a background image set for a colour section with id ‘about-bg’ in the following page:

Settings: Fixed, Top Right, No Repeat

On the iPad and iPhone however, the image displays correctly for a second, but then it looks like another stylesheet gets loaded and the background image displays incredible big.

Initial load: https://www.dropbox.com/s/q8gxqi1n6t0ooyq/IMG_0004.PNG?dl=0
After page load complete: https://www.dropbox.com/s/2huppl85sagpn40/IMG_0001.PNG?dl=0

I’ve tried adding this:
```
@media screen and (max-width: 767px) {
#about-bg {
background-attachment: scroll !important;
background-size: 1600px 900px !important;
}}
}
```
It does effect the positioning, but it still displays only for a second before being overridden.

Any help would be hugely appreciated. I’ve wasted so many hours on this bug.

Thanks.
Luke
- This topic was modified 9 years, 8 months ago by LukeHopkins.
April 13, 2015 at 9:42 am #427372

Rikard
Keymaster

Hey LukeHopkins!

I’m pretty sure it’s doing that because of your background-size argument, maybe you could try something like background-size: cover instead?

Best regards,
Rikard

April 14, 2015 at 4:57 am #427982

LukeHopkins
Participant

Hi Rikard,

I’ve tried this and it doesn’t seem to work. The image is displayed massively.

Luke

April 14, 2015 at 8:46 pm #428444

Elliott
Inactive Moderator

Hey!

Try setting it to “center center” instead of “top right”.

Regards,
Elliott

April 15, 2015 at 2:21 am #428610
LukeHopkins
Participant
Hi Elliott,

That centers the image but its still way too massive for the screen.

Here’s a mockup of what’s happening (left), and what should happen (right).
Pink is the iPad Frame, Yellow is the page content.

Surely I’m not the only one who needs this. Seems like it would be a pretty common issue?

Thanks,
Luke
- This reply was modified 9 years, 8 months ago by LukeHopkins.
April 15, 2015 at 8:34 pm #429208
Elliott
Inactive Moderator
Hey!

It looks like it’s from some custom CSS your using.
```
#about-bg {
    background-attachment: scroll !important;
    background-size: 1600px 900px !important;
}
```
Best regards,
Elliott
April 16, 2015 at 9:05 am #429419

LukeHopkins
Participant

Hi Elliott,

I have tried it without the code. This doesn’t fix the problem.

Do you have any ideas around if this is fixable, I feel we’re not getting anywhere.

Thanks,
Luke

April 17, 2015 at 6:32 am #430102
Ismael
Moderator
Hi!

It looks fine when I checked the page. Minimum screen resolution of iPad devices is 1024x768px so I think this should work:
```
@media screen and (max-width: 1024px) {
#about-bg {
background-attachment: scroll !important;
background-size: 1600px 900px !important;
background-position: 70% 50% !important;
}}
```
Please remove browser cache before testing the page. If it still doesn’t work, please give us the login credentials. We would like to check it.

Best regards,
Ismael
April 17, 2015 at 6:45 am #430110

LukeHopkins
Participant

This reply has been marked as private.

April 19, 2015 at 4:23 am #430799

Ismael
Moderator

Hi!

Thank you for the info but the login credentials are not working. Please check.

Regards,
Ismael

April 19, 2015 at 11:21 pm #431002

LukeHopkins
Participant

This reply has been marked as private.

April 21, 2015 at 4:37 am #431720

Rikard
Keymaster

Hi!

I had no luck with those details either unfortunately.

Best regards,
Rikard

April 21, 2015 at 7:38 am #431791

LukeHopkins
Participant

This reply has been marked as private.

April 22, 2015 at 4:33 am #432530

Rikard
Keymaster

Hey!

Great, logging in worked now. I’m not sure if the home page was the problem, but it looks like it’s responding just fine there?

Regards,
Rikard

April 22, 2015 at 4:37 am #432532

LukeHopkins
Participant

Hi Rikard,

Ok great. The homepage is fine, it’s the about us page and to a lesser extent, the faq’s page which have the display issue.

Did my mockup make sense?
Link: https://www.dropbox.com/s/9ofuk7d8462vc3n/BackgroundIssue.png?dl=0

Regards,
Luke

April 23, 2015 at 5:56 am #433243
Rikard
Keymaster
Hey!

Oh right, sorry, I think you removed the link. Please remove the background-size argument from your media query and replace the background position argument with the following:
```
background-position: 70% -125% !important;
```
Best regards,
Rikard
April 29, 2015 at 12:16 pm #436609

LukeHopkins
Participant

Hi Rikard,

That didn’t fix the issue either.

I’ve actually hired a developer (at my own cost) to find an solution for this. With the help of this developer we’ve discovered that there was some rogue code which was preventing the image displaying correctly on iOS devices:

It was on another element that was being transformed using -webkit-transform: translate3d(0,0,0);

After discovering this and thinking all was fixed, I found out from my client that the problem was still occurring with Android devices. What is strange, is that the site displays fine in emulation software such as browserstack, but on actual devices, it doensn’t.

I think what’s happening is that another element is being inserted on mobile only and then styles are being applied to it. I’m guessing Javascript because it comes at the end of the page load so even what we see in Browsershots on the images that do have a background image may not be correct. There may be another background that is used later.

The CSS rule in question is .avia_mobile #top .av-parallax-section (I don’t know why its called that because its not strictly parallax)

I hope you can help me resolve this issue as I’m positive I can’t be the only one experiencing this problem.

I look forward to hearing from you.

Kind regards,
Luke

May 4, 2015 at 5:55 am #438724

LukeHopkins
Participant

Hi,

I’m just wondering if you had an update on this issue?

Thank you
Luke

May 5, 2015 at 4:52 am #439498

Rikard
Keymaster

Hey!

As far as I know you are the only one having this problem, did your developer not find a solution for it? I not sure I can give you any other solutions than the ones which have already been posted. I think your best course of action would be to remove all custom code and start from scratch to see which of the solutions above actually works.

Regards,
Rikard

May 6, 2015 at 2:34 am #440071

LukeHopkins
Participant

Hi Rikard,

I’ve tried removing all the custom css and implementing the above snippets one by one but nothing is working.

As mentioned in the original post, it appears that it loads correctly for a second, but then another stylesheet loads and overwrites the change.

Are you able to get one of your developers to looking into this. I’ve spend around 6 hours on it, my developer has spent about 5 hours on it (at my cost) and we’re unable to find a solution. This website project has lost any profitability it had for me now and I really just need your help to find a solution so this works.

I look forward to your reply.

Luke

May 7, 2015 at 5:38 am #440748

Rikard
Keymaster

Hi!

I had a look at the /about page just now and it looks very responsive to me on every screen width?

Best regards,
Rikard

May 7, 2015 at 5:55 am #440755

killyman
Participant

I think I’m having a similar issue as Luke. I’ve posted my issue here.

https://kriesi.at/support/topic/color-section-parallax-background-image-ipad-and-iphone-6-problems/

Could it be a problem with theme versions as I mention in my support topic post?

May 7, 2015 at 5:55 am #440756

LukeHopkins
Participant

Hi Rikard,

Yes the page is responsive, but the background image is not. As previously mentioned, the background image is fitting to content, not to the browser size.

Explanation: https://www.dropbox.com/s/9ofuk7d8462vc3n/BackgroundIssue.png?dl=0

Please also note, that it appears to work fine in emulators such as chrome dev tools, and browser shots, but on ACTUAL devices, it doesn’t work.

Luke

May 8, 2015 at 6:07 am #441381

Josue
Inactive Moderator

Hey Luke!

Please update the theme to the latest version (3.1.5).

Best regards,
Josue

May 18, 2015 at 4:44 pm #445814

killyman
Participant

Hi Luke,

I’m having no luck getting any response from the support forum moderators regarding my issue. See link below
https://kriesi.at/support/topic/color-section-parallax-background-image-ipad-and-iphone-6-problems/

Just wondering if your issue was resolved with the theme update to 3.1.5. Seems like my problem is because of the theme update. The issue I’m having doesn’t present itself with an older theme version I have on another test server.

Killyman
Author

Posts

Viewing 25 posts - 1 through 25 (of 25 total)

The topic ‘Background Image on iPad displaying huge’ is closed to new replies.