Section Background Image - Fixed Image Not Displaying On Mobile

[Carolineingraham]

Hi,

I am using a section with a background image and overlaid text on my homepage (the elephant image). This works perfectly on desktop and laptop sized screens. However, I have noticed that an iPad Mini in landscape orientation uses the Laptop settings from the website!

I am using this Section Element CSS (as supplied by you guys for a different website / query).

$el .x-bg .x-bg-layer-lower-image {
    background-attachment: fixed;
}

If I remove this CSS, the image shown on the iPad. When it is re-added the image only displays on desktops and laptops.

Is there a tweak to allow the fixed image, but let it be shown on the iPad as well? (Secure Note attached).

Thanks,
Christopher

[ruenel]

Hello Christopher,

Thanks for writing in! I have checked your page and I found out that you have a section that shows for desktops and another section for smaller screens.

Only the first section that has the background-attachment: fixed; css will work. The css will not work for the other second that uses the image element. The background-attachment is a background property. It does not affect to image elements.

For reference:

• https://css-tricks.com/almanac/properties/b/background-attachment/
• https://www.w3schools.com/cssref/pr_background-attachment.asp

[Carolineingraham]

Hi RueNel,

You are correct about the sections - desktop and mobile. However, when I look at the page on an iPad Mini in landscape orientation, it takes the desktop version, but does not display the image.

I would have expected the iPad to pick up one of the tablet views, but that was not the case - presumably based upon screen resolution?

If I remove the CSS noted in my original post, the image displays to the iPad Mini!

The issue is clearly something with the CSS, but I cannot see why!

Please can you look at the issue again.

Many thanks,
Christopher

[rad]

Hi Christopher,

The fixed positioning of the background is only applicable to the parallax type of background. You should remove it if you only intend to display its background without parallax. Removing it should fix the issue of missing backgrounds on the iPad.

You’re correct about that it’s based upon screen resolution, and it’s not CSS issue at all. Let’s say we’re referring to iPad Mini 1st Gen, this is the specs

It has 1024px screen resolution similar to 13-15 inch desktop monitor, or a laptop. In fact, 1024px is still considered a desktop resolution. A tablet is something in between mobile and desktop, which shares the same boundary depending on orientation, which is why you’re seeing desktop specific views on landscape orientation.

The hide-during-breakpoints feature is just a generic breakpoint(common boundaries between devices) because it’s not possible to include all devices.

A tablet given with a keyboard can be a laptop and a touch laptop with a removable keyboard can be a tablet, this issue is not just limited to iPad Mini. And this limitation is not fixable by CSS nor Javascript, because there is no way to tell what kind of device the browser is running under, it can’t tell if it’s a laptop used as a tablet, or a tablet used as a laptop/desktop.

If you intend to hide desktop elements from tablet then I recommend hiding them from laptop breakpoints, since both tablets and laptops share the same 1024px resolution. The downside, tablet elements will appear on the laptop as well.

Thanks!

[Carolineingraham]

Thanks Rad,

Good explanation! It is actually an iPad 2 Mini…! I get your point and have switched Laptop downwards to the “mobile” version of the Section. My full HD laptop obviously still gets the Desktop version of the Section.

Many thanks,
Christopher

[friech]

We are delighted to assist you with this.

Cheers!