-
Posts
-
Colour section set to 50% (though this applies whatever setting used) with an image background.
In this example need to keep the top of image on screen so background position set to top center.
On desktop all is fine. Viewed on ipad the top of the image is obscured by the header.
Problem seems to be that on ipad the colour section below the header extends underneath it to the top of the page and is therefore hidden by the header.
Looking for a css fix for mobile only (not desktop with small browser window as this is not affected).
Screen shot – test site & admin login below.
Thanks.
Hi M1000000!
I can’t see any issue with your header on ipadpeek.com and to be honest I can’t see any issue on your screenshot neither. Can you explain further please?
Cheers!
AndyNo problem. On both the background position is set to “top center” – so the top of the image (ie 100 or so pixels above the guys head) should be at the top of the color section – as it is on the desktop view – see new screen shot below.
On the mobile / ipad view however the top of the image appears to be aligned with the top of the window – resulting in the top 100px or so being obscured by the header and the guys head is cut off.
See screen grabs below.
When you set a header to transparency it seems to display with correct top alignment on ipad – when using non transparent header it does not, infact it does not move down to accommodate the header (as it does on desktop) resulting in the top part of the image being obscured and the top alignment option failing.
Hey!
I think now I get what you mean. You can control background image position for iPad screen size with this code:
@media only screen and (max-device-width: 1024px) { .av-parallax.avia-full-stretch.enabled-parallax.active-parallax { background-position: 50% -30% !important; }}Try to play around with -30% until it fits for you.
Regards,
AndyHi Andy,
Multiple tests – clearing safari cach between – css seems to make no difference at all on my iPad3.
I note though that this issue only effects fixed & parralax background settings – default scroll displays correctly (with or without this fix)!
Hi!
I can’t see that you implemented this code correctly. Please put it inside Quick CSS field.
Best regards,
Andyfeel free to use admin login provided and hack if it helpe – just a test site to resolve this issue.
Hey!
I adjusted the code. I changed -30% to -85% and now I can see the difference. Clear browser cache and hard refresh a few times.
Best regards,
AndySo you can’t replicate the issue at all then – your without code screen shot is where I want to be!
Here’s what I see – identical with / without.
I don’t want to hijack this discussion but I see a similar problem with my page. Overall the background positioning with parallax option enabled in color section is not really comprehensible for me. On desktop no matter what the setting for the anchor (center, top, top left…) it always looks exactly the same (at least for the first color section of the page). On the iPad on the other hand no matter which setting i choose it always seems to be anchored to the bottom center resulting in cutoff heads and faces. Overall alle the background images with parallax and stretch to fit are way too big on the iPad. I would expect them to try to fit the width or the height and compensate for the rest but actually they are just much wider and higher than necessary. very strange. Now that I look at it the same is true for the desktop as well, it’s just not as obvious.
I’ll follow the progress of this thread curiously to see if there’s a resolution for this behavior.
cheers guys!
Zerodi – this is working for me!
/* Mobile background position */
.avia_mobile .av-parallax {
height: 100% !important;
}Hi!
glad you found a fix. I removed my screenshots from public view. If you want them to be removed from imgur as well, then please make a removal request: http://imgur.com/removalrequest
Let us know in a new ticket if you have some more questions related to our theme.
Cheers!
Andy
- The topic ‘color section background image positioning on iPad’ is closed to new replies.