[Resolved] Background issue on tablet

Home Forums Support [Resolved] Background issue on tablet

Home Forums Support Background issue on tablet

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1593547
    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?

    #1593640
    Leo
    Staff
    Customer Support

    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?

    #1594947
    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?

    #1595031
    Leo
    Staff
    Customer Support

    I was using Chrome’s device simulation.

    #1595144
    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.

    #1595206
    Leo
    Staff
    Customer Support

    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?

    #1595333
    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.

    #1595334
    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.

    #1595335
    Rylan Urban

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

    #1595473
    David
    Staff
    Customer Support

    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.

    #1597346
    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.

    #1597375
    Rylan Urban

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

    #1597395
    David
    Staff
    Customer Support

    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

    #1597473
    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.

    #1598526
    David
    Staff
    Customer Support

    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;
    }
Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.