[Resolved] Background issue on tablet

[Rylan Urban]

I have a body background image on this site:
– No repeat
– Cover
– Fixed
– 100% 100%

Within the customizer the image shows properly in tablet view. But on actual tablets (I’ve tried a couple ipads) the background image is blurry and only shows the top part. I’d like it to cover the screen – with the bottom of the image at the bottom of the screen (as it shows on desktop). This is a recent issue, maybe from flexbox?

[Leo]

Hi there,

This is what I’m seeing using the browser simulation for iPad:
https://www.screencast.com/t/bddxQgEc19lO

Is that not what you are seeing?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rylan Urban]

It’s actually not… that’s so strange. My families ipad’s must have a version cached on their browser? I’ve 100% cleared things from my end. Are you using Safari?

[Leo]

I was using Chrome’s device simulation.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rylan Urban]

So that shows correctly, as does the WP customizer. But on actual ipads – the error persists. I just downloaded chrome (it ensure it’s not a browser cache issue) on a new ipad and it shows a blurred background image. Here is a screenshot from safari (chrome shows the same). It would also be nice to shrink the menu text so it doesn’t wrap if that’s possible.

[Leo]

Really not sure why it would show like that. The menu should turn into toggle as well.

Can you disable all plugins except GP Premium to test?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rylan Urban]

Yup – just checked. Disabled everything, cleared CF cache, and confirmed plugins were disabled on site (some content was messed up). Background image and menu error still showing the same on ipad.

[Rylan Urban]

I fixed the menu issue for the primary menu by changing the mobile menu breakpoint to 800px, but the issue remains for the secondary menu. Still can’t fix background image issue.

[Rylan Urban]

Note that the background image works on mobile devices… it’s just tablet size.

[David]

Hi there,

touch devices such as mobiles and tablets, disable fixed background images as they put a big strain on the processor and the devices battery.

You can use some CSS to set disable the fixed background and if need be replace it with a more mobile friendly image like so:

/* Tablet and mobile background images */
@media(max-width: 1024px) {
    body {
        background-image: url('url_to_mobile_friendly_image');
        background-attachment: initial;
        background-repeat: no-repeat;
        /* Set mobile size and position */
        background-size: cover;
        background-position: 50% 100%;
    }
}

and one specifically for mobile if required:

@media(max-width: 768px) {
    body {
        background-image: url('url_to_mobile_friendly_image');
        background-attachment: initial;
        background-repeat: no-repeat;
        /* Set mobile size and position */
        background-size: cover;
        background-position: 50% 100%;
    }
}

Adjust the URLs and positions to suit.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rylan Urban]

Thanks David. Just a note that the fixed background image for mobile has always worked in the past (and still works now), and the tablet worked at one time. It’s just the tablet image that isn’t working now.

This fix isn’t exactly what I was looking for – but it may actually work better since I can now set different and set smaller images for mobile and tablets using your CSS.

[Rylan Urban]

@Dave, did you mean to write fixed instead of initial in your CSS code above?

[David]

iOS devices have problems with Fixed Background images, they can cause the image to scale completely out of proportion and not all devices support the fixed background. Hence the reason for setting it to initial

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rylan Urban]

Sorry about the long thread, I might be confusing things too much here. All I’m trying to do is achieve this effect (these are snapshots from within the WP customizer)
– Live website and current background settings are in the first message of this support thread
– Everything works fine on desktop and mobile, except on IOS as you pointed out

My question is: what is the best way to achieve my desired effect (body background image that’s always visible, in reasonable proportion, on all devices and operating systems). Thanks for your patience – I really want to make this background work.

[David]

Hmmm… tricky one. Disable the Background Image for now, and try adding this CSS:

body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('//www.energyhub.org/wp-content/uploads/Sustainable-Energy-Background.png');
    background-size: cover;
    z-index: -1;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts